如何根据元素的 z-Index 值将类应用于元素？（使用JavaScript）答案

【问题标题】：How to apply a class to elements based on their z-Index value? (using javascript)如何根据元素的 z-Index 值将类应用于元素？（使用JavaScript）
【发布时间】：2021-04-17 22:30:10
【问题描述】：

我正在尝试更改文档中所有元素的不透明度，但我单击的元素除外（它具有最高的 z-Index）。

这是我正在使用的代码，我是否错误地访问了 z-Index？运行时，整个页面的不透明度会发生变化（包括 z-Index 高于 6 的页面）。

allElements = document.getElementsByTagName("*")

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

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

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

 }

【问题讨论】：

您需要包含所有相关代码（HTML 和 CSS），因为如果您最初使用 HTML style 设置 CSS，您将只能使用 .style 属性访问 CSS属性，所以我们首先需要看看你是如何设置样式的。

标签： javascript html css dom

【解决方案1】：

我会建议一种基于类的更简洁、更健壮的方法。

基本上使用事件监听器和在你的身体和你的高亮项目上切换类。其余的只是你想象的 CSS。

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>

【讨论】：

【解决方案2】：

当您访问元素的 .style 属性时，您将只能访问通过 HTML style 属性在元素上建立的样式。如果样式是通过class 属性完成的或使用JavaScript 设置的，.style 属性将无法访问它。在这些情况下，您必须使用.getComputedStyle()，它不关心样式的设置方式和位置。

说到如何设置样式，最好使用预制的 CSS 类设置样式，然后根据需要添加或删除类，而不是设置单独的样式。使用类可以减少代码重复，更易于管理，并且可以更好地扩展。您可以使用.classList API 轻松访问和添加、删除或切换类。

另外（仅供参考）don't use .getElementsByTagName()，因为这是一种返回“活动节点列表”的遗留方法，这可能会损害性能。相反，请使用.querySelectorAll()

所以，这里有一个类似于你正在做的例子：

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 不客气。不要忘记对所有有用的答案进行投票，并考虑通过单击答案左上角的复选标记将其标记为“最佳”答案。