使用纯Javascript查询元素的伪类

Question

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

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

第二个解决方案似乎很麻烦，我的意思是，如果它是对象的属性（对象是Dom元素），我应该能够以直接的方式获取它，而不是在其父节点上运行查询函数。如果我的元素没有父节点怎么办（您可能会质疑在浏览器中现在或将来是否可能存在具有伪类但没有父节点的元素。理论上是可能的，也许在虚拟Dom中，或者在浏览器的未来实现中，我不知道）。

我想要的只是像element.hasPseudoClass("<the class>")或element.getPseudoClasses()这样的东西，或者任何其他方便查询元素伪类的方式。我没有找到简单明了的方法。

- Sassan

Answer 1

您可以使用

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文档。

- user663031

---

谢谢，我在谷歌上找到的所有关于这个问题的帖子都没有提到这个解决方案。我知道一定有类似的东西。 - Sassan

这段代码在Chrome浏览器上无法按照您的编写方式工作。请更改为element.matches('div:hover')或 element.matches(element.tagName+':hover')。 - Sassan

在Chrome 51上对我来说运行良好。:hover是一个完全有效的选择器，不需要通过标签名进行限定。 - user663031