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

Question

I have something like this:

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

Now, the function works correctly, but my a tag doesn't changes his color. Is there a way to make Javascript modify the attribute color of the CSS rule .xa?

Answer 1

This should do the trick

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

You can define a :hover style in the CSS for the link too

a:hover {
    color: red;
}

That will change the links color when you hover over it (the link).

.x:hover a { }

will apply a style to the link when you hover over .x

Answer 2

This might be more suitable:

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

This will override the link's colour when the row is hovered over, making the onMouseOver function unnecessary.

Note that it may fail in IE6, but personally I've never had any problems making things other than links :hover in that browser...

Answer 3

Live Demo

This will change all the links that are children to red.

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

Although I highly suggest using the :hover psuedo class like others have mentioned.

Answer 4

-HTML- wrap your tr with in <table> tag, and convert to lowercase your onmouseover event attribute.

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

-Javascript- change you javascript function body for select to a tag

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