Question

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

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);
        }
    }
}

Answer 1

rows [i] .style.a.color应该有效。：链接不是真正的类。如果你向我们展示rows []和内容

会更容易

Answer 2

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

你也可以这样做 document.getElementsByTagName（'ID'+ i）.style.color ='red';

实际上，最好使用css类来处理这类事情。与jquery一起工作将是最简单的。

Answer 3

使用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 }

<强> EDIT3：

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

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。现在你使用类来设置样式，你不需要它

Answer 4

我担心没有这样简单的解决方案。链接是行的子元素，不遵循常规文本颜色。在我看来，最简单的解决方案是更改行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'; }

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

4 个答案: