javascript - 检查CSSRule是否与Element匹配

时间:2012-09-18 06:22:52

标签: javascript css dom

有没有办法检查CSS选择器(由document.styleSheets[666].rules[1984].selectorText获得)是否与特定元素匹配?

我要求一个跨浏览器的纯JavaScript解决方案,但我会考虑使用jQuery,如果只是简单地完成它。

3 个答案:

答案 0 :(得分:3)

对于现代浏览器,有matchesSelector。对于不太现代的浏览器,您可以使用querySelectorAllwalk the DOM

不要使用jQuery。 Sizzle就足够了。

Sizzle.matchesSelector(element, selector)

https://github.com/jquery/sizzle/wiki/Sizzle-Documentation

答案 1 :(得分:1)

搜索特定的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

答案 2 :(得分:-1)

在jQuery中非常简单:

$(element).is(cssSelector);