在纯Javascript中查询元素的伪类

时间:2016-07-05 05:27:14

标签: javascript dom

我知道我可以检查一些伪类'使用JQuery状态(如isHovered)我知道我可以通过在其父节点上运行querySelector(/ querySelectorAll)来检查元素是否具有特定的伪类。

第一个对我来说完全没用,因为我不会使用JQuery,而JQuery对我需要查询的伪类没有is方法。

第二个解决方案似乎很脏,我的意思是如果它是一个对象的属性(对象是Dom元素)我应该能够以一种简单的方式得到它,而不是通过在其父节点上运行q函数。如果我的元素没有父节点会怎么样(你可能会质疑没有父类节点的元素有伪类的可能性。它现在在浏览器中可能存在,也可能不存在,但理论上它可能是什么?可能,可能在虚拟Dom中,或者在未来的浏览器实现中,idk。)。

我想要的只是element.hasPseudoClass("<the class>")element.getPseudoClasses()或任何其他方便的方法来查询元素的伪类。我没有直接找到一些东西。

1 个答案:

答案 0 :(得分:4)

您可以使用

element.matches(':hover')

var box = document.getElementById("box");
var msg = document.getElementById("msg");

setInterval(() => msg.textContent = box.matches(':hover') ? "in" : "out", 1000);
<div id="box" style="width: 100px; height: 100px; background-color: red; "></div>
<div id="msg"></div>

请参阅MDN documentation