如何通过父元素id更改子元素的类样式？

Question

For example I have simple html code:

 <a id="news" href="#"><div class="" >News</div></a>

How to change class style for div element by id of href on pure javascript ? Or may be better describe div properties in class for "a" element ? ( How to do it ?)

Answer 1

You can get a reference to your "news" element using getElementById . Then you can find the div in its childNodes and set the div's className property.

For instance, this would work with the HTML you've quoted to set the "foo" class on the element:

document.getElementById("news").childNodes[0].className = "foo";

...because the div is the first child of the "news" element. Or if you want to add the "foo" class:

document.getElementById("news").childNodes[0].className += " foo";

Also worth looking at querySelector and querySelectorAll , which are supported by most (but not all) browsers currently in use ( more on support ).

If you might have other elements, whitespace/text nodes, etc., you might look at getElementsByTagName rather than childNodes so you only get the specific elements you're interested in:

document.getElementById("news").getElementsByTagName('div')[0].className += " foo";

More to explore:

• DOM3 Core specification
• DOM2 HTML specification
• Selectors API specification
• HTML5 Web Applications API

Answer 2

There are a number of ways to do it but assuming the direct structure above.

var new_class = "ClassName";
document.querySelector('a#news > div').setAttribute('class', new_class);

Of course if your browser doesn't support querySelector you'll have to do a bit more finagling like this

document.getElementById('news').childNodes[0].setAttribute( 'class', new_class );

Answer 3

As in HTML5, it is better to use dataset modifiers, like this:

.some-content[data-alt = "white"] {
    background: white;
}

and then in javascript:

someElement.dataset.alt = "white"

Answer 4

var newsA = document.getElementById('news');
var myDiv = newsA.getElementsByTagName('div')[0];
myDiv.setAttribute('class', 'myClass');

That is one way.

To turn that into one nice line of code:

document.getElementById('news').getElementsByTagName('div')[0].setAttribute('class', 'myClass');