使用Javascript修改内部标记的CSS规则

Question

我有这样的事情：

-HTML -

<table>
<tr class="x" onMouseOver="light(this)">
  <td>
    <a href="x">Link</a>
  </td>
  <td>
    Text
  </td>
</tr>
</table>

-CSS -

.x a{
  color: black;
}

-Javascript -

function light(x){
  x.style.color="red";
}

现在，该功能正常工作，但我的标签不会改变他的颜色。有没有办法让Javascript修改CSS规则.x的属性颜色？

Answer 1

这应该可以解决问题

x.children[0].children[0].style.color="red";

您也可以在CSS中为链接定义:hover样式

a:hover {
    color: red;
}

当您将鼠标悬停在链接上时，这将改变链接颜色。

.x:hover a { }

当您将鼠标悬停在.x

上时，

会将样式应用于链接

Answer 2

这可能更合适：

.x:hover {color:red}
.x:hover a{color:red}

当行悬停在行时，这将覆盖链接的颜色，使onMouseOver函数不再需要。

请注意，在IE6中它可能会失败，但我个人在浏览器中创建链接:hover以外的其他内容时从未遇到任何问题......

Answer 3

<强> Live Demo

这会将所有子项链接更改为红色。

function light(x){
  var elems = x.getElementsByTagName("a");
    for(var i=0; i < elems.length;i++){
        elems[i].style.color="red";
    }
}​

虽然我强烈建议像其他人提到的那样使用:hover psuedo类。

Answer 4

-HTML-将您的tr包装在<table>标记中，并将onmouseover事件属性转换为小写。

<table>
<tr class="x" onmouseover="light(this)">
  <td>
    <a href="x">Link</a>
  </td>
  <td>
    Text
  </td>
</tr>
</table>

-Javascript-将您的javascript函数正文更改为a标记

function light(x){
  x.getElementsByTagName("a")[0].style.color="red";
}