純粋なJavascriptの要素の擬似クラスを照会する

Question

JQueryで疑似クラスの状態をチェックすることができます（isHoveredのように）、要素をチェックできることは、querySelector（/ querySelectorAll）を実行して特定の疑似クラスを持つことです。親ノード。

私はJQueryを使用しないため、最初は全く役に立たず、JQueryはクエリに必要な疑似クラスのメソッドをisにしていません。

2番目の解決策は、それがオブジェクトのプロパティ（Dom要素であるオブジェクト）であれば、親ノードでq関数を実行するのではなく、直接的にそれを得ることができるはずです。要素に親ノードがない場合（親ノードがない要素が擬似クラスを持つ可能性について疑問を呈するかもしれませんが、ブラウザでは可能かもしれませんが、理論上は可能ですDom、または将来のブラウザの実装では、idk）。

私が望むのは、element.hasPseudoClass("<the class>")またはelement.getPseudoClasses()のようなものか、要素の疑似クラスを照会する他の便利な方法です。私はまっすぐなものを見つけられませんでした。

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 documentationを参照してください使用することができます。