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

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

score 0 · Accepted Answer

这应该可以解决问题

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

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

a:hover {
    color: red;
}

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

.x:hover a { }

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

score 0 · Accepted Answer

这可能更合适：

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

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

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

-HTML- 用 in 标记包装你的 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";
}

4 回答 4