Question

要解释我想要做什么有点难，所以我会试着用一个例子来做。假设我有这个HTML：

<ul>
  <li id="myli" class="myclass">Hello</li>
</ul>

以及以下css

.myclass{
   color:red;       
}
li.myclass{
   background-color:black;
}
ul li{
   float:left;
}

现在，我想在JS中创建一个获取DomElement的函数，并从该元素的css文件中获取所有匹配的选择器（如chrome中的F12工具栏，显示元素的所有样式），如下所示： / p>

var mySelectors = GetSelectorsForElement(document.getElementById("myli"));

并且mySelectors的内容将是

[".myclass",
 "li.myclass",
 "ul li"]

这可以在JS中实现吗？

Answer 1

按照你描述的方式，看起来你已经拥有了id，如果你也想要获得这些类，你可以这样做：

window.getMatchedCSSRules(document.getElementById("id"));

Answer 2

如果由于（缺少）浏览器支持而不想使用Webkit本地getMatchedCSSRules，则可以尝试以下功能：

function css(a) {
    var sheets = document.styleSheets, o = [];
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (a.is(rules[r].selectorText)) {
                o.push(rules[r].selectorText);
            }
        }
    }
    return o;
}

JSFiddle：http://jsfiddle.net/HP326/

改编自Can jQuery get all CSS styles associated with an element?

Answer 3

window.getMatchedCSSRules(document.getElementById("myli"));

Javascript - 如何从css文件中获取元素的所有匹配类和选择器

3 个答案: