从样式表中获取.css（）而不是第一个元素

How do I get a css property from the stylesheet and not from the first element?

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

As you can see .css() returns the actual displayed rgb value. Is it somehow possible to get the "overwritten" one from the stylesheet?

如您所见.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>

2 个解决方案

#1

With plain javascript you can get an array of stylesheets using

使用普通的javascript,您可以使用一系列样式表

var sheets = document.styleSheets;

If you get back a length > 0, external css is loaded. You can loop sheets and find your rule

如果返回长度> 0,则加载外部css。您可以循环工作表并查找规则

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
    }
}

Note: This seems not to work in google chrome if you load an html file from disk (file:///). Other browsers not tried.

注意:如果从磁盘加载html文件(file:///),这似乎不适用于谷歌浏览器。其他浏览器未尝试过。

#2

Instead of checking an existing element that might have other classes overriding it, just make a new element and pull the background-color from that:

而不是检查可能有其他类覆盖它的现有元素,只需创建一个新元素并从中拉出背景颜色:

var rgb = $('<div class="c1"></div>').css("background-color");

edit: apparently you have to add the element to the dom momentarily for it to actually receive a background color. This code works (tested):

编辑:显然你必须暂时将元素添加到dom中才能实际接收背景颜色。此代码有效(已测试):

var temp = $('<div class="c1"></div>');
temp.appendTo("body");
var rgb = temp.css("background-color");
temp.remove();
$('#output').html(rgb);

#1