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

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

用于查找不是display:noneCSS 选择器的元素等效于:visibleis

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

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

这是一个小提琴。

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

Answer 3

不,没有.CSS规范没有定义: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 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" } );