Manipulating style with getElementsByClassName

Question

I don\'t understand why I cannot manipulate the style of .special in my code. I\'m sure it\'s something simple, but it\'s not working.

I am an h1!<         


        

Answer 1

Use the for of statement to iterate the collection you get back.

for (const s of document.getElementsByClassName("special")) {
  s.style.color = "blue";
}

---

And I would personally use querySelectorAll instead, since it's more general purpose, and can fetch by class just as easily.

for (const s of document.querySelectorAll(".special")) {
  s.style.color = "blue";
}

---

Lastly, if all .special classes should get that style, it would seem like you could just add it to your CSS instead.

.special {
  color: blue;
}

This will depend on other logic that you may have not included in the question though. Even then, you may be able to get away with adding another class, maybe even to some ancestor element.

Answer 2

Because x is returning as an array of objects. You could use jQuery to return a list of more manipulable objects, or do a count on the return, and iterate through the array, setting properties on each item as you go.

Answer 3

document.getElementsByClassName returns an array-like object. You need to reference it as such.

var x = document.getElementsByClassName("special")[0]; //Get the first element with the class name
x.style.color = "blue";

Answer 4

getElementsByClassName returns a collection not just one object. So you need to loop through them and apply the color to it. Below is a sample example with mouse events.

window.onload=function(){
	var hiClass = document.getElementsByClassName("special");
    
    document.getElementById('A').addEventListener('mouseover', function(){
        changeColor(hiClass, 'red');
    });
    document.getElementById('A').addEventListener('mouseout', function(){
        changeColor(hiClass, 'blue');
    });
    
    document.getElementById('B').addEventListener('mouseover', function(){
        changeColor(hiClass, 'blue');
    });
    
    document.getElementById('B').addEventListener('mouseout', function(){
        changeColor(hiClass, 'red');
    });
}
function changeColor(coll, color){
   
    for(var i=0, len=coll.length; i<len; i++)
    {
        coll[i].style["background-color"] = color;
    }
}

.a {
    width:50px;
    height:50px;
    background-color:blue;
    margin-top:15px;
}
.b {
    width:50px;
    height:50px;
    background-color:red;
    margin-top:10px;
}
th {
    padding:20px;
    width:30px;
    height:30px;
    background-color:green;
}

<table>
    <tr>
        <th id="A" >a</th>
        <th id="B" >b</th>
    </tr>
</table>

<h1>I am an h1!</h1>
<p id="first" class="special">Hello</p>
<p class="special">Goodbye</p>
<p>Hi Again</p>
<p id="last">Goodbye Again</p>

Answer 5

getElementsByClassName returns a list of all elements with class "special", not just one (because there can be multiple elements with the same class name). If you want to get the first element with class "special", do this instead:

var x = document.getElementsByClassName("special");
x[0].style.color = "blue";

To change the style of all elements with class "special", you can use a classic for loop:

var x = document.getElementsByClassName("special");
for (var i=0; i<x.length; i++) {
    x[i].style.color = "blue";
}