javascript - querySelector() where display is not none

Question

我有一长串 <li>我需要过滤的项目。我想要可见的。这是一个隐藏的示例:

<li style="display:none;" 
<a href="https://www.example.com/dogs/cats/">
<img class="is-loading" width="184" height="245" 
</a><span>dogscats</span>
</li>

那些没有隐藏的没有display visible属性，它们根本就没有style属性。

这与我想要的相反:

document.querySelectorAll('.newSearchResultsList li[style="display:none;"]')

如何根据不等于或不包含“display:none;”的样式属性进行选择？

Answer 1

这整件事有点古怪，但您可以使用 :not() 选择器来反转您的选择。当心某些浏览器规范化样式属性，因此您需要为可能规范化的空间包含一个选择器。

var elements = document.querySelectorAll(
    '.newSearchResultsList li:not([style*="display:none"]):not([style*="display: none"])'
);

console.log(elements);

<ul class="newSearchResultsList">
    <li style="display:none;">hidden 1</li>
    <li style="display:block;">visible 1</li>
    <li style="display:none;">hidden 2</li>
    <li style="display:block;">visible 2</li>
</ul>

如果需要，您还可以同时选择这些元素和任何子元素。

const selector = '.newSearchResultsList li:not([style*="display:none"]):not([style*="display: none"])';
const elements = document.querySelectorAll(`${selector}, ${selector} *`);

console.log(elements);

<ul class="newSearchResultsList">
    <li style="display:none;">hidden <i>1</i></li>
    <li style="display:block;">visible <b>1</b></li>
    <li style="display:none;">hidden <i>2</i></li>
    <li style="display:block;">visible <b>2</b></li>
</ul>

当然，这些仅在选择具有内联样式的元素时有效。