Change style of all of one HTML element using Javascript

Question

I can apply an opacity to all divs with some simple CSS:

div {
  opacity: 1;
}

But, how can I change the opacity of all divs dynamically using Javascript?

I've tried the following to no avail:

document.getElementById("div").style.opacity = 0.5;

Predictably so, as this targets elements with an ID...

Is there a way, using Javascript, that I can edit the style applied to all divs?

Thanks.

Answer 1

getElementsByTagName and querySelectorAll can get you a list of elements which share a tag name. You can then loop over it like an array.

A better bet would be to predefine your styles in CSS using a class on the body and a descendant selector, and then toggle that class with JavaScript.

div { opacity: 1; }
body.foo div { opacity: 0.5; }

and

document.body.classList.add("foo");

Answer 2

You need to select all div by querySelectorAll and then loop.

function changeOpacity(){
  var divs = document.querySelectorAll("div");
  divs.forEach(function(elem){
    elem.style.opacity = 0.5;
  });
}

<div>
Niklesh
</div>
<div>
Raut
</div>
<input type="button" onclick="changeOpacity()" value="Change Opacity">