我正在编写一个 chrome 扩展，我在一个网页上工作，其中列出了一些事情。所以，基本上，我正在阅读该表并在 javascript 中进行一些计算并显示它们。现在，网页上有一个过滤器选项。过滤后，根据选择的过滤器，它不会在列表中显示某些内容。它通过将显示设置为无来做到这一点。它通过执行以下操作使显示为无：
[data-assignee]:not([data-aggr-assignees*="|xyz|"]) {
display: none;
}
因此，当我尝试查找显示不是 none 的元素以查看过滤项目时，它会提供所有项目，因为它看起来没有更改项目的 CSS 属性。我检查了所有元素的 style.display 值，它即将到来。有人可以帮助我如何获取在这种情况下显示为块的元素吗？
您可以使用选择器查询整个文档，*并使用for循环遍历每个元素以检查其内联display属性是否设置为无。当然，这只会处理使用内联 CSS 隐藏元素的情况。
<div style="display: block;">
DIV
</div>
<span style="display: none;"></span>
<script>
var allElems = document.querySelectorAll("*");
var visibleElems = [];
var hiddenElems = [];
for(let i = 0; i < allElems.length; i++){
if(allElems[i].style.display != "none"){
visibleElems.push(allElems[i]);
} else {
hiddenElems.push(allElems[i]);
}
}
console.log("Visible elements: "+visibleElems);
console.log("Hidden elements: "+hiddenElems);
</script>如果要检查displayCSS 样式表中元素的属性，则需要使用window.getComputedStyle.
.hidden{
display: none;
}<div style="display: block;">
DIV
</div>
<textarea class="hidden"></textarea>
<span style="display: none;"></span>
<style>
</style>
<div class="hidden">
</div>
<select class="hidden"></select>
<script>
var allElems = document.querySelectorAll("*");
var visibleElems = [];
var hiddenElems = [];
for(let i = 0; i < allElems.length; i++){
if(allElems[i].style.display == "none"||window.getComputedStyle(allElems[i], null).getPropertyValue("display")=="none"){
hiddenElems.push(allElems[i]);
} else {
visibleElems.push(allElems[i]);
}
}
console.log("Visible elements: "+visibleElems);
console.log("Hidden elements: "+hiddenElems);
</script>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句