Question

无论如何使用带有Firefox的querySelector（）或querySelectorAll（）函数的伪选择器来检测可见性？特别是我希望能够做到这样的事情：

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

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

编辑：可见由显示定义为无且可见性未隐藏< /强>

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

使用普通的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 4

For finding elements that are not display:none the CSS selector equivalent to :visible is

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

You could do the same for visibility:hidden and then chain :not() selectors if you need to.

Here's a fiddle.

Edit: Be careful with spaces and other punctuation. If you later manipulate these elements with JQuery and hide(), for instance, and need to call the same function, then you will need to chain :not([style="display: none;"]) to your CSS selector.

Answer 5

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

jQuery的：

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

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

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

6 个答案: