javascript - javascript-CSSRuleがElementと一致するかどうかを確認します

Question

CSSセレクター（によって取得document.styleSheets[666].rules[1984].selectorText）が特定の要素と一致するかどうかを確認する方法はありますか？

クロスブラウザの純粋なjavascriptソリューションを求めていますが、jQueryで単純に実行する場合は、jQueryの使用を検討します。

Answer 1

最新のブラウザには、がありmatchesSelectorます。最近のブラウザでは、DOMquerySelectorAllを使用してウォークすることができます。

jQueryは使用しないでください。シズルで十分です。

Sizzle.matchesSelector(element, selector)

https://github.com/jquery/sizzle/wiki/Sizzle-ドキュメント

Answer 2

特定のCSSルールを検索する

次の例では、スタイルシート内で「a：hover」ルールを検索し、見つかった場合は、そのルールへの参照を返します。

var mysheet=document.styleSheets[0]
var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules
for (i=0; i<myrules.length; i++){
if(myrules[i].selectorText.toLowerCase()=="a:hover"){ //find "a:hover" rule
targetrule=myrules[i]
break;
}
}

参照：http ：//www.javascriptkit.com/dhtmltutors/externalcss3.shtml

Answer 3

jQueryでは本当に簡単です。

$(element).is(cssSelector);