-1

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

newneub
  • 183
  • 1
  • 14
  • Possible duplicate of [Change the style of an entire CSS class using javascript](http://stackoverflow.com/questions/9153718/change-the-style-of-an-entire-css-class-using-javascript) – thatOneGuy Mar 18 '16 at 14:26

3 Answers3

3

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";
})();
Rajaprabhu Aravindasamy
  • 66,513
  • 17
  • 101
  • 130
  • 3
    You my friend, are a ninja. – newneub Mar 18 '16 at 14:34
  • @newneub :) Glad to help! :) – Rajaprabhu Aravindasamy Mar 18 '16 at 14:34
  • 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 Mar 18 '16 at 14:38
  • 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. :) – jpec Mar 18 '16 at 14:56
  • @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. :) – Rajaprabhu Aravindasamy Mar 18 '16 at 14:58
  • Suit yourself. I just wanted to point that out for anybody else who comes across this. – jpec Mar 18 '16 at 15:00
0

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'
}
thatOneGuy
  • 9,977
  • 7
  • 48
  • 90
  • 1
    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: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName – Sweet Chilly Philly Jun 10 '19 at 23:49
0

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.