querySelector（）其中display不是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>

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

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

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

如何基于样式属性选择不等于或包含“display：none;”？

Answer 1

这一切都很糟糕，但您可以使用:not()选择器来反转您的选择。请注意某些浏览器规范化样式属性，因此您需要为可以规范化的空间包含选择器。

＆＃13;

＆＃13;

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

console.log(elements);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

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

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

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

或opossite

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

Answer 3

• 使用'.newSearchResultsList li'选择器选择所有li元素
• 使用Array#filter过度收藏
• 使用getComputedStyle获取与元素
相关联的所有样式
• 仅返回包含style！== none
的元素

＆＃13;

＆＃13;

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);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;