Is there a more efficient way of controlling css elements using javascript

Question

I already solved it, but I was just wondering if there was a more efficient way of writing the code

function p(){
    document.getElementById("boom").style.display = "block";
    document.getElementById("boom1").style.display = "block";
    document.getElementById("boom2").style.display = "block";
    document.getElementById("boom3").style.display = "block";
}
p();

The result is what I expected but I was just wondering if there is an easier way to write it

use a common class, get all elements and iterate to apply style — Pranav C Balan
– Pranav C Balan, Commented Apr 30, 2019 at 10:54

Pranav C Balan · Accepted Answer · 2019-04-30 11:03:22Z

1

You can use a common class for all elements to group them(or use combined selector), then get all elements using querySelectorAll(or getElementsByClassName if using common class) method and for iterating over the returned NodeList collection use NodeList#forEach method(polyfill for older browser).

function p(){
    document.querySelectorAll(".common-class").forEach(ele => ele.style.display = "block");
    // or .forEach(({style}) => style.display = "block");
}

p();

function p() {
  var all = document.querySelectorAll(".common-class");
  all.forEach(({ style }) => style.display = "block");
}
p();

div {
  display: none
}

<div id="boom" class="common-class">boom</div>
<div id="boom1" class="common-class">boom1</div>
<div id="boom2" class="common-class">boom2</div>
<div id="boom3" class="common-class">boom3</div>

edited Apr 30, 2019 at 11:03

answered Apr 30, 2019 at 10:58

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is there a more efficient way of controlling css elements using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related