jquery - 从样式表而不是第一个元素获取 .css()

Question

如何从样式表而不是第一个元素中获取 css 属性？

如您所见，.css() 返回实际显示的 rgb 值。是否有可能以某种方式从样式表中获取“覆盖”的样式表？

.c1 { background-color: rgb(255, 0, 0); }
.c2 { background-color: rgb(0, 255, 0); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){ 
        var rgb = $(".c1").css("background-color");
        $('#output').html(rgb);
    });
</script>
<div class="c1 c2">elem</div>
<div id="output"></div>

Answer 1

使用纯 javascript，您可以使用

获取一组样式表

var sheets = document.styleSheets;

如果返回长度 > 0，则加载外部 css。你可以循环 sheets 并找到你的规则

for (var i=0; i < sheets.length; i++) {
    var rules = sheets[i].cssRules; // .rules for IE?
    for (var j=0; j < rules.length) {
       if (rules[j].cssText ... do something with the css here
    }
}

注意:如果您从磁盘 (file:///) 加载 html 文件，这在 google chrome 中似乎不起作用。其他浏览器没试过。