Add Class using GetElementsByClassName JavaScript

Question

I am converting a jQuery site to vanilla javascript and am reaching out for advice on the best way to convert a simple line of jQuery to javascript.

The jQuery $(".div_class").css({ display: 'none' });

Any suggestions doing this in pure javascript using only classes would be very helpful.

Thanks

• thatOneGuy: Possible duplicate of Change the style of an entire CSS class using javascript

Answer 1

Try to use document.getElementsByName to get the required element,

[].slice.bind(document.getElementsByClassName("div_class"))().forEach(function(itm){
 itm.style.display = "none";
});

And convert it to an array by binding the array like object as a this value of slice and call it. Now iterate over the returned array and set its display property.

Also you can shorten it by using forEach directly,

[].forEach.bind(document.getElementsByClassName("div_class"),function(itm){
 itm.style.display = "none";
})();

• newneub: You my friend, are a ninja.
• Rajaprabhu Aravindasamy: @newneub :) Glad to help! :)
• jpec: You can simplify it even further like this, removing the slice() step: [].forEach.call(document.getElementsByClassName('div_class'), function (el) { el.style.display = 'none'; })
• jpec: The .bind isn't even necessary, since the first argument of .call sets the context in which [].forEach is called. .call further saves the step of having to execute the bound forEach function at the end: .call both sets the context and executes the function in one step. :)
• Rajaprabhu Aravindasamy: @jpec Everyone are writing in that manner. Just for a change I am writing in this way.. :) I read the algorithm, there will not be any performance drawbacks when we use bind. :)

Answer 2

Select all elements with that class name :

var allEls = document.getElementsByClassName('div_class');

This comes back with an array so you'll have to loop through each element and change each display to none like so :

for(var i=0; i < allEls.length; i++){
 allElls[i].style.display = 'none'
}

• Sweet Chilly Philly: Hey sorry it doesn't come back with an array, it comes back with an array-like object, getElementsByClassName returns an HTML Collection of found elements: developer.mozilla.org/en-US/docs/Web/API/Document/…

Answer 3

Try these lines to do so:

var div_class = document.getElementsByClassName('div_class');
for (var div in div_class) {
 div.style.display = 'none';
}

I think your confusion is because document.getElementsByClassName('div_class') returns one Array... and because that I've used a for..in-loop to iterate over each match of the previous array.

Hope it helps.