在纯 Javascript 中查询元素的伪类

Question

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

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

第二种解决方案看起来很脏，我的意思是如果它是对象的属性（对象是 Dom 元素），我应该能够以直接的方式获取它，而不是通过在其父节点上运行 q 函数。如果我的元素没有父节点怎么办（您可能会质疑没有父节点的元素具有伪类的可能性。现在在浏览器中可能可能也可能不可能，但理论上是可能的，也许在虚拟Dom，或者在浏览器的未来实现中，idk。）。

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

Answer 1

您可以使用

element.matches(':hover')

element.matches(':hover')

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

setInterval(() => msg.textContent = box.matches(':hover') ? "in" : "out", 1000);

请参阅MDN 文档。