Firefox，查询选择器和可见的伪选择器

Question

是否可以使用带有 Firefox 的 querySelector() 或 querySelectorAll() 函数的伪选择器来检测可见性？特别是我希望能够做这样的事情：

elem.querySelector('#list .list-item:visible');
elem.querySelector('#section .sub-section:visible .title');

无需担心浏览器不一致或其他实现，只需 Firefox。谢谢！

编辑：可见是由 display 不是 none 和 visibility 不是 hidden。

Answer 1

由于 :visible 伪选择器没有原生实现，我决定使用 CSS 类来隐藏和显示我的元素，因此只需检查类名而不是可见性。这是我的选择器现在的样子：

elem.querySelector('#list .list-item:not(.hidden)');

现在在 2016 年我们还可以使用隐藏的 html5 属性，所以这个选择器也可以工作：

elem.querySelector('#list .list-item:not([hidden])');

Answer 2

不，没有。 The CSS specification 没有定义 :visible（或相关的）选择器，AFAIK Firefox 没有实现非标准的伪选择器。

如果您想自己实现，请注意 jQuery 如何实现其:visible 选择器：

在 jQuery 1.3.1（和更早的版本）中，如果元素的 CSS“显示”不是“无”，它的 CSS“可见性”不是“隐藏”，并且它的类型（如果是输入）是不是“隐藏”的。 在 jQuery 1.3.2 中，如果浏览器报告的 offsetWidth 或 offsetHeight 大于 0，则元素可见。

来源：http://docs.jquery.com/Release:jQuery_1.3.2#:visible.2F:hidden_Overhauled

Answer 3

对于查找不是display:none 的元素，等效于:visible 的CSS 选择器是

:not([style='display:none'])

如果需要，您可以对 visibility:hidden 执行相同的操作，然后链接 :not() 选择器。

这是fiddle。

编辑：注意空格和其他标点符号。如果您稍后使用 JQuery 和 hide() 操作这些元素，并且需要调用相同的函数，那么您需要将 :not([style="display: none;"]) 链接到您的 CSS 选择器。

Answer 4

使用纯 javascript，您还可以轻松模拟 jQuery 行为，将您的 querySelector 结果转换为数组，并对其进行过滤：

Array.prototype.slice.call(document.querySelectorAll('your selector'))

这将创建一个包含选择器结果的普通数组，您可以将其过滤为：

.filter(function (item,index) { return item.style.display!="none" } );

甚至是其他的 jquery 条件 (item.style.visibility != "hidden" && item.style.opacity > 0 && ...)。

作为一个班轮：

Array.prototype.slice.call(document.querySelectorAll('your selector')).filter(function (item,index) { return item.style.display!="none" } );

Answer 5

检查元素是否可见，支持所有主流浏览器：

jQuery:

$('.list-item').is(':visible');

原版JS：

function isVisible(elem) {return elem.offsetWidth > 0 || elem.offsetHeight > 0 || elem.getClientRects().length > 0; }

Answer 6

您可以使用offsetParent 值来确定元素是否可见。

let parent = document.getElementById('parent');
let allSubChildren = parent.querySelectorAll('.sub-children');

let visibleChildren = Array.prototype.slice.call(allSubChildren).filter(function (item, index) {
    console.log('Element "' + item.textContent + '" is ' + (item.offsetParent !== null ? 'visible' : 'hidden'));
    return item.offsetParent !== null;
  }
);

console.log(visibleChildren);

.none {
  display: none;
}

.hidden {
  visibility: hidden;
}

<p><b>item.offsetParent</b> returns <b>null</b> if the element or any parent is not displayed.</p>
<em>Check the console</em>

<div id="parent">
  <div class="children">
    <div class="sub-children">visible</div>
  </div>
  <div class="children hidden">
    <div class="sub-children">visibility hidden doesn't work</div>
  </div>
  <div class="children none">
    <div class="sub-children">display none</div>
  </div>
  <div class="children">
    <div class="sub-children">also visible</div>
  </div>
  <div class="children">
    <div class="sub-children none">also display none</div>
  </div>
</div>

<div id="result">

</div>