Javascript Firefox、查询选择器和可见伪选择器

Firefox的querySelector（）或querySelectorAll（）函数是否可以使用伪选择器来检测可见性？我特别希望能够做到以下几点：

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

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

编辑：可见定义为显示无和可见不隐藏不，没有。没有定义

：可见的

（或相关的）选择器，AFAIK Firefox也没有实现非标准的伪选择器

如果您想自己实现，请注意jQuery是如何实现其

：visible

选择器的：

在jQuery1.3.1（及更早版本）中，如果一个元素的CSS“display”不是“none”，它的CSS“visibility”不是“hidden”，它的类型（如果是输入）不是“hidden”，那么它是可见的。 在jQuery 1.3.2中，如果浏览器报告的offsetWidth或OffsetWight大于0，则元素可见

---

来源：

由于没有：visible伪选择器的本机实现，我决定使用CSS类来隐藏和显示我的元素，从而允许只检查类名而不是可见性。下面是我的选择器现在的样子：

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

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

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

---

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

jQuery：

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

香草JS：

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

---

使用纯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" } );

---

要查找非

显示的元素：none

，将显示相当于

：visible

的CSS选择器

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

您可以对

可见性：隐藏
执行相同的操作，然后根据需要链接
：not（）
选择器

这是一个例子

编辑：注意空格和其他标点符号。例如，如果以后使用JQuery和
hide（）
操作这些元素，并且需要调用相同的函数，则需要将
：not（[style=“display:none；”]）
链接到CSS选择器。
可以使用
offsetParent
值来确定元素是否可见


let parent=document.getElementById（'parent'）；
让allSubChildren=parent.queryselectoral（'.sub-children'）；
let visibleChildren=Array.prototype.slice.call（allSubChildren.filter）（函数（项，索引）{
console.log（'Element'+item.textContent+'是'+（item.offsetParent！==null？'visible'：'hidden'）；
return item.offsetParent！==null；
}
);
console.log（visibleChildren）
。无{
显示：无；
}
.隐藏{
可见性：隐藏；
}
item.offsetParent如果未显示元素或任何父元素，则返回null

检查控制台
看得见的
隐藏的可见性不起作用
无显示
也可见
也显示无
您对“可见性”的定义是什么？DOM元素的显示设置为block会起作用，但理想情况下，它也会检查可见性是否设置为visible。这正是我担心的…糟糕的地方。我知道它不是一个有用的CSS伪选择器，但jjQuery实现在侦测CSS可见性属性方面并不是很好，如“代码>可见性：隐藏< /代码>将占用文档和哲学层面上的空间，也许这是正确的实现……取决于您认为可见的……如果它占用空间那么页面上就有了一些争论元素是“可见的”的空间。这仍然是2015年的最佳方式吗？我相信是的：可见不是，也可能永远不会成为css规范的一部分。2016年更流行的做法是使用新的隐藏html5全局属性。它不是完全向后兼容的，所以要小心。这是Mozilla的docs@SuperUberDuper。隐藏属性将元素显示设置为“无”。所以，不，它不考虑不透明度。你确信这两个例子在jQuery的所有版本中是等价的吗？@ McGuRu2000，它们在JQuery的最新版本中是等价的，我没有检查（因此从来没有提到）关于这个方法的jQuery的早期版本。但当你这么做了十多年后，你就不再认为提到的是“最新版本”。想想别人在2年内读到你的答案时会怎么想，jQuery3？