javascript - How to change class style for children element by parent element id? - Stack Overflow

admin管理员组

文章数量:1195904

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 ?)

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 ?)

• javascript

Share Improve this question Follow edited Feb 10, 2012 at 23:30 Bdfy asked Feb 10, 2012 at 23:16 BdfyBdfy 24.6k5858 gold badges135135 silver badges180180 bronze badges

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 14

Since you're looking for the first div inside an element with an ID (which must be unique), your best bet is querySelector, combined with either className (if you want to completely replace the entire content of the class attribute) or classList (if you want to add/remove classes while leaving others unchanged):

// *Replacing* all existing classes with one new one
document.querySelector("#news > div").className = "example";

// *Adding* a class without replacing existing ones:
document.querySelector("#news > div").classList.add("example");

querySelector and classList are supported by all non-obsolete browsers (and many obsolete ones).

Alternatively, you can get a reference to your "news" element using getElementById, then use getElementsByTagName to get the div elements within it:

// Replacing
document.getElementById("news").getElementsByTagName("div")[0].className = "example";

// Adding
document.getElementById("news").getElementsByTagName("div")[0].classList.add("example");

More to explore:

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

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 );

You can grab original element then children of node to edit the child node class

const link = document.querySelector('#news')

For Toggle class:

link.children[0].classList.toggle('example-class')

For add class:

link.children[0].classList.add('example-class')

For remove class:

link.children[0].classList.remove('example-class')

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');

you can try to use nth-child to select a child or childs of an elements..

const news = document.querySelector('#news')
news.querySelector('a:nth-child(1)').classList.add('example')

You can repeat this for any childs you need

news.querySelector('a:nth-child(2)').classList.add('example')
news.querySelector('a:nth-child(3)').classList.add('example')

Hope it will help someone :)

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"

本文标签： javascriptHow to change class style for children element by parent element idStack Overflow