Javascript querySelector() 其中 display 不是 none

querySelector() where display is not none

提问by Doug Fir

I have a long list of <li>items I need to filter. I want the visible ones. Here's an example hidden one:

我有一长串<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>

Those which are not hidden don't have a display visible attribute, they just don't have a style attribute at all.

那些没有隐藏的没有显示可见属性，它们根本没有样式属性。

This gives me the opposite of what I want:

这给了我与我想要的相反的东西：

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

How can I select based on style attribute does not equal or contain "display:none;"?

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

回答by Alexander O'Mara

This whole thing is kind-of hacky, but you could use the :not()selector to invert your selection. Beware some browser normalize the style attribute, so you will want to include a selector for the space that may be normalized in.

整个事情有点棘手，但您可以使用: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;">visisble 1</li>
    <li style="display:none;">hidden 2</li>
    <li style="display:block;">visisble 2</li>
</ul>

回答by JC Hernández

Try this:

尝试这个：

document.querySelectorAll('.newSearchResultsList li:hidden')

or (EDIT: Based on style attribute.)

或（编辑：基于样式属性。）

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

or opossite

或相反

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

回答by Rayon

• Use '.newSearchResultsList li'selector to select all the lielements
• Use Array#filterover collection
• Use getComputedStyleto get all styles associated with element
• Return only those elements having style!== none

• 使用'.newSearchResultsList li'选择器选择所有li元素
• 使用Array#filter过度收集
• 使用getComputedStyle得到与元素相关联的所有样式
• 仅返回具有style!== 的元素none

var liElems = document.querySelectorAll('.newSearchResultsList li');
var filtered = [].filter.call(liElems, function(el) {
  var style = window.getComputedStyle(el);
  return (style.display !== 'none')
});
console.log(filtered);

<ul class="newSearchResultsList">
  <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>
  <li>
    <a href="https://www.example.com/dogs/cats/">
      <img class="is-loading" width="184" height="245">
    </a><span>Visible</span>
  </li>
</ul>