用Javascript修改内部标签的CSS规则答案

【问题标题】：Modify CSS rule of inner tag with Javascript用Javascript修改内部标签的CSS规则
【发布时间】：2012-09-12 15:51:11
【问题描述】：

我有这样的事情：

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

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

【问题讨论】：

如果您只是在人们悬停链接时更改颜色，则可以使用 :hover 伪选择器。
由于您的 css 直接设置 a 元素的样式，因此您必须使用 javascript 直接设置 a 元素的样式以覆盖 css 定义。这是其级联性质的一部分。
见stackoverflow.com/questions/566203/…

【解决方案1】：

这可能更合适：

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

当行悬停时，这将覆盖链接的颜色，从而使onMouseOver 函数变得不必要。

请注意，它在 IE6 中可能会失败，但就我个人而言，除了在该浏览器中创建链接 :hover 之外，我从来没有遇到任何问题...

【讨论】：

【解决方案2】：

这应该可以解决问题

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

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

a:hover {
    color: red;
}

当您将鼠标悬停在链接（链接）上时，链接颜色会发生变化。

.x:hover a { }

当您将鼠标悬停在 .x 上时，将为链接应用样式

【讨论】：

【解决方案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 类。

【讨论】：

【解决方案4】：

-HTML- 用<table> 标记包裹你的tr，并将你的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";
}

【讨论】：