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

Modify CSS rule of inner tag with Javascript

本文关键字：CSS 规则 Javascript 修改 内部      更新时间：2023-09-26

我有这样的东西：

-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规则.xa的属性颜色？

这可能更合适：

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

当行悬停在上面时，这将覆盖链接的颜色，从而使onMouseOver功能变得不必要。

请注意，它可能在IE6中失败，但就我个人而言，在该浏览器中制作链接:hover以外的东西从来没有遇到过任何问题。。。

这应该可以完成

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

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

a:hover {
    color: red;
}

当你把鼠标悬停在链接上时，它会改变链接的颜色。

.x:hover a { }

将鼠标悬停在.x 上时将对链接应用样式

实时演示

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

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

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

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

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

-Javascript-将select的Javascript函数体更改为a标签

function light(x){
  x.getElementsByTagName("a")[0].style.color="red";
}
相关文章：