JavaScript：通过z-index号选择多个元素

Question

我想选择DOM中的所有元素使用100％JavaScript的z-index = 2374463831具有（NO jQuery）

DOM不断变化；添加和删​​除元素。通过z-index ###删除元素的代码需要一个事件监听器

我已经尝试了很多类似代码的迭代，但是都没有成功。这是我的最后一次迭代尝试，由于某种原因，它不起作用

window.addEventListener('change', function() {
  var varElements = document.querySelectorAll("[style='z-index: 2374463831']");
    if(varElements) { for(let varElement of varElements) { varElement.remove(); } }
} //function
}) //window.

Answer 1

这是我要做的

var varElements = document.querySelectorAll("*"); //  Get all elements, possibly narrow down if you can the extent of the query
var zIndexElements = [];

for(var i = 0; i < varElements.length; i++){  //  Iterate all elements

	var ele = varElements[i];
  
  if(ele.style.zIndex === "2147483647"){  //  The max value of zIndex is 2147483647 on modern browsers, it'll change to that when exceeded.
  	var style = ele.getAttribute("style");  // As a workaround for the above note, get the style property
    if(style.indexOf("z-index: 2374463831") > -1) //  Check if the x-index is the desired one.
    		zIndexElements.push(ele); // Push to array
  }
}


console.log(zIndexElements);

<div style="z-index: 2374463831;">

</div>

最大的问题是您的zIndex超过最大值，请参阅this post here。我的解决方案检查zIndex最大值的元素，然后获取样式属性，并执行.indexOf确定所设置的实际值。

希望这可以帮助或至少给您带来想法。

Answer 2

检查下面的代码

const check = () => {
  var varElements = document.querySelectorAll("*");
    	for(let varElement of varElements) { 
      if(varElement.style['z-index'] == 10) { 
   	 		var node = document.createElement("LI");
				var textnode = document.createTextNode(varElement.className);
				node.appendChild(textnode); 
    		document.getElementById('list').appendChild(node)
        }
    }
}

window.addEventListener('change', check )

window.addEventListener('load', check);

<div class="top" style="z-index:10">
<div class="inner1" style="display:'block',z-index:10">
<div class="inner2" style="z-index:10">

</div>
</div>
<div class="inner3" style="z-index:12">

</div>
</div>

<ul id="list">

</ul>