querySelector() 其中 display 不是 none答案

【问题标题】：querySelector() where display is not nonequerySelector() 其中 display 不是 none
【发布时间】：2017-02-10 07:18:41
【问题描述】：

我有一长串需要过滤的<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;”？

【问题讨论】：

标签： javascript css-selectors

【解决方案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>

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

【讨论】：

您好，感谢您的回答，我更喜欢这个答案的简单性，但是“请注意某些浏览器会规范化样式属性，您是否希望为可能被规范化的空间包含一个选择器。”那是什么意思？否定只使用 not() 似乎是诀窍，但我现在害怕使用？你能扩大影响吗？干杯！
@DougFir 一些浏览器基本上会格式化样式属性以插入页面，或者在解析时自动，或者在您更改样式属性时。这就是为什么应该在选择器中包含空格，而我的代码有一个:not 有空格，一个没有空格。
这对我不起作用，显然是因为 display:none 的后代即使是 display:anything else 也不会显示。
@Michael 您可以使用* 选择器选择这些元素的子元素。
空间选择器不就是匹配children的吗？此外，指定诸如:not([style*="display:none"]) otherstuff 之类的选择器不起作用，因为在 display:none 元素和我不希望它找到的元素之间的层次结构中还有其他元素；前面的匹配它的直接父级。如果存在这样的事情，则相反会起作用（例如，“孩子对父母”而不是“父母对孩子”）。

【解决方案2】：

使用'.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>

【讨论】：

【解决方案3】：

试试这个：

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

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

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

或对面

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

【讨论】：

:hidden 不是 Javascript 的标准部分。 jQuery 支持它，但不支持 document.querySelectorAll().
标签是javascript和jquery-selectors，刚刚回答>_
嗨，你的第二行与我需要的相反！我需要“不包含”。我尝试使用 != 但这不起作用
@Rayon *= 属性选择器是 DOM API 原生的。
注意：style=xxx 属性仅在直接在元素上设置样式时才有效。如果元素以其他方式（可见性或 CSS）隐藏，它将不起作用。