How to apply a class to elements based on their z-Index value? (using javascript)

Question

I'm trying to change the opacity of all elements on my document, except for the one I clicked (which has the highest z-Index).

Here is the code I'm using, am I accessing the z-Index's wrongly? When run, the opacity of the whole page changes (including those with a z-Index higher than 6).

allElements = document.getElementsByTagName("*")

for (let i = 0; i < allElements.length; i++) {

      if (allElements[i].style.zIndex < 6)

          allElements[i].style.opacity='0.7'

 }

You'll need to include all the relevant code (HTML and CSS) because you will only be able to access CSS using the `.style` property if you initially set the CSS with the HTML `style` attribute, so we need to see how you set up the styles in the first place. — Scott Marcus, Apr 16 '21 at 18:32

score 1 · Answer 1 · edited Apr 17 '21 at 14:22

I would suggest a cleaner and more robust approach based on classes.

Basically use event listeners and toggle classes on your body and your highlightable items. The rest is just CSS as you would imagine.

resetAllHighlights = () =>  [...document.querySelectorAll('.item')].map(e => e.classList.remove('highlighted'));

toggleHighlightMode = (highlightMode) => { 
  if (highlightMode) document.querySelector('body').classList.add("highlight-enabled");
  else document.querySelector('body').classList.remove("highlight-enabled");
  return highlightMode = !highlightMode;
};

[...document.querySelectorAll('.item')].map(e => e.addEventListener('click', (e) => {
  resetAllHighlights()
  toggleHighlightMode(true)
  e.currentTarget.classList.add('highlighted');
}));

.item {
  height:100px;
  width: 100px;
  background-color: red;
  margin: 5px;
  opacity: 1;
}

body {
  display: flex;
}

body.highlight-enabled .item:not(.highlighted) {
  opacity: 0.5;
}

<body class="">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</body>

score 0 · Accepted Answer · answered Apr 16 '21 at 18:49

When you access an element's .style property, you will only have access to the styles that were established on the element via the HTML style attribute. If the styling was done via the class attribute or set with JavaScript, the .style property won't be able to access it. In those cases, you must use .getComputedStyle(), which doesn't care how or where the styling was set.

And speaking of how to set styles, it's always better to set styles using pre-made CSS classes and then just add or remove the class(es) as needed instead of setting individual styles. Using classes reduces duplication of code, is easier to manage, and scales better. You can easily access and add, remove or toggle classes with the .classList API.

Also (FYI), don't use .getElementsByTagName() as this is a legacy method that returns a "live node list", which can hurt performance. Instead, use .querySelectorAll()

So, here's an example similar to what you are doing:

let divs = document.querySelectorAll("div.opaque");

// Just set up one event handler at a common ancestor of
// all the elements that may trigger the event
document.addEventListener("click", function(event){
  // Check to see if the event was triggered by
  // an element you care to handle
  if(event.target.classList.contains("opaque")){
    // Loop over all the necessary elements
    divs.forEach(function(div){
      // Check the z-index using .getComputedStyle()
      if(getComputedStyle(div).zIndex < 6){
        // Instead of modifying a style directly,
        // just add a pre-made class
        div.classList.add("lightOpaque"); 
      }
    });
  }
});

body { background-color: red; }

div { height:35px; border:1px dotted grey; position:relative; z-index:5; background-color:skyblue; }

.lightOpaque { opacity: .7; }

.special { position:relative; z-index:7; background-color:aliceblue; }

<div class="opaque">

</div>
<div class="opaque">

</div>
<div class="opaque special">

</div>
<div class="opaque">

</div>
<div class="opaque">

</div>
<div class="opaque">

</div>

@Sbkn You're welcome. Don't forget to up vote all helpful answers and consider marking this one as "the" answer by clicking the check mark at the top left of the answer. — Scott Marcus, Apr 17 '21 at 14:20

How to apply a class to elements based on their z-Index value? (using javascript)

2 Answers2