用于更改链接文本的字体颜色的代码

Code to change font color for text that is a link

本文关键字：字体 代码 颜色 文本 链接 用于      更新时间：2023-09-26

我的JavaScript中有2行代码可以动态更改颜色，一行用于更改表格行的背景颜色，另一行用于更改字体颜色：

rows[i].style.backgroundColor = 'red'
rows[i].style.color = 'white'

我还需要一行代码来更改字体颜色，特别是当它是超链接时。 我试过了：

rows[i].style.link.color = 'white'

和其他几种变体，但我无法更改链接的字体颜色。 任何人都可以帮忙吗？ 谢谢。

完整代码：

var INTENDED_MONTH = 7 //August
// INTENDED_MONTH is zero-relative
now = new Date().getDate(),
rows = document.getElementById('scripture').rows;
if (new Date().getMonth() != INTENDED_MONTH) {
    // need a value here less than 1, or the box for the first of the month will be in Red
    now = 0.5
};
for (var i = 0, rl = rows.length; i < rl; i++) {
    var cells = rows[i].childNodes;
    for (j = 0, cl = cells.length; j < cl; j++) {
        if (cells[j].nodeName == 'TD'
  && cells[j].firstChild.nodeValue != ''
  && cells[j].firstChild.nodeValue == now) {
            rows[i].style.backgroundColor = 'red'
            rows[i].style.color = 'white'
            rows[i].style.a.color = 'white'
            $('html,body').delay(500).animate({ scrollTop: rows[i].offsetTop }, 2000);
        }
    }
}

使用 CSS 怎么样？

tr{
   backgorund:red;
   color:white;
}
tr a{
   color:white;
}

如果你需要 JavaScript，你可以使用

var els=rows[i].getElementsByTagName('a');
for(var i=0;i<els.length;i++){
   els[i].style.color = 'white';
}

编辑：

您也可以使用

tr a{
   color:inherit;
}

然后当你这样做时

rows[i].style.color = 'white'

锚点的颜色将与行的颜色 - 白色 - 相同。

编辑 2：

正如我在评论中所说，即使您使用 javascript 创建链接，它们也是 HTML 元素，因此 CSS 会影响它们。

但问题是规则

table.hovertable a:link, table.hovertable a:visited, table.hovertable a:hover, table.hovertable a:active {
    color: black;
}

重写

table.hovertable tr a {
    color: inherit;
}

然后，您需要

table.hovertable tr a:link {
    color: inherit;
}

具有选择器:link，因此两个规则具有相同的选择器，并且最后一个规则具有效力。

但我忘了说inherit在IE7及更早版本上不起作用。然后，您可以使用

rows[i].className+=' selected';

和

table.hovertable tr.selected{
   color:white;
   background:red;
}
table.hovertable tr.selected a:link{
   color:white
}

编辑3：

如果要为与当前月份的单元格设置相同的样式，可以这样做

var m=new Date().getMonth();
document.getElementById('months').rows[Math.floor(m/6)].cells[m%6].className+=' selected';

(假设该表有id="months"(

但随后

table.hovertable .selected{
   color:white;
   background:red;
}
table.hovertable .selected a:link{
   color:white
}

(.selected而不是tr.selected，现在是td(。

但我看到你仍然使用color:inherit.现在你使用类设置样式，你不需要它

行[i].style.a.color应该可以工作。 ：link不是一个真正的类。如果您向我们显示行[]和内容会更容易

确保页面上有正确的 row[i] 作为 html 元素。在更改颜色之前alert(row[i].id);以确保您具有正确的元素。

你也可以做document.getElementsByTagName('ID' + i(.style.color = 'red';

实际上最好使用css类来做这种事情。与jquery一起使用将是最简单的。

恐

怕没有这么简单的解决方案。链接是行的子元素，不遵循常规文本颜色。在我看来，最简单的解决方案是更改行 css 类，并定义其中的颜色。

你可以在 css 中定义一个合适的颜色块，如下所示：

.redHighlighted { background-color: 'red'; color: 'white'; }
.redHighlighted a, .redHighlighted a:visited,
.redHighlighted a:hover, .redHighlighted a:active { color: 'green'; }

然后你可以用一行在javascript中做到这一点：

rows[i].setAttribute("class", "redHighlighted");

稍后，您当然可以删除该类，或者将其替换为其他类。另请注意，您可能必须指定TD元素的颜色，而不是CSS中的行，如下所示：

.redHighlighted td { background-color: 'red'; color: 'white'; }
相关文章：