-1

我的 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);
        }
    }
}
4

4 回答 4

0

rows[i].style.a.color 应该可以工作。:link 不是真正的课程。如果您向我们展示 rows[] 和内容会更容易

于 2012-08-27T16:10:26.883 回答
0

确保您在 page 上有正确的 row[i] 作为 html 元素。在你alert(row[i].id);改变颜色之前做，以确保你有正确的元素。

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

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

于 2012-08-27T16:10:44.533 回答
0

使用 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. 现在您使用不需要的类设置样式

于 2012-08-27T16:11:37.747 回答
0

恐怕没有这么简单的解决方案。链接是行的子元素，不遵循一般的文本颜色。我认为最简单的解决方案是更改行 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'; }
于 2012-08-27T16:20:31.773 回答