Javascript querySelector（），其中display不是none

我有一长串需要筛选的

项目。我想要看得见的。下面是一个隐藏的示例：

<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:none；”？

请尝试以下操作：

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

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

黄铁矿

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

• 使用

  '.newSearchResultsList li'

  选择器选择所有

  li

  元素
• 在集合上使用

  Array#filter

• 使用

  getComputedStyle

  获取与元素关联的所有样式
• 仅返回具有

  样式的元素

  ！==<代码>无

var liElems=document.querySelectorAll（'.newSearchResultsList li'）；
var filtered=[].filter.call（liElems，函数（el）{
var style=window.getComputedStyle（el）；
返回（style.display！=“无”）
});
console.log（过滤）


狗粪


看得见的

这整件事有点老套，但您可以使用
:not（）
选择器来反转您的选择。请注意，某些浏览器会规范化“样式”属性，因此您需要为可能在中规范化的空间包含一个选择器


var elements=document.querySelectorAll(
'.newSearchResultsList li:not（[style*=“display:none”]）：not（[style*=“display:none”]）”
);
控制台日志（元素）

隐藏的1
访问列表1
隐藏的2
visisble 2
：隐藏的
不是Javascript的标准部分。jQuery支持它，但不支持
document.queryselectoral（）
。标记是javascript和jQuery选择器，刚刚回答>\u嗨，你的第二行与我需要的正好相反！我需要“不包含”。我尝试使用！=但事实并非如此work@Rayon
*=
属性选择器是DOM API固有的。注意：
style=xxx
属性仅在直接在元素上设置样式时有效。如果元素以其他方式隐藏（可见性或CSS），它将不起作用。您好，谢谢您的回答，我更喜欢这个答案的简单性，但是“注意一些浏览器会规范化样式属性，您是否希望为可能在中规范化的空间包含选择器。”这是什么意思？仅仅使用not（）来否定似乎是个技巧，但我现在害怕使用？你能详细说明一下其中的含义吗？干杯@DougFir一些浏览器基本上会格式化style属性以插入页面，或者在解析时自动插入，或者如果您更改了style属性。这就是为什么空格应该包含在选择器中，而我的代码有一个
：not
带空格，一个不带空格。
document.querySelectorAll('.newSearchResultsList li[style*="display:none"]');

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