Question

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

如您所见.css（）返回实际显示的rgb值。是否有可能让＃34;覆盖＆＃34;一个来自样式表？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

不是检查可能有其他类重写它的现有元素，而是创建一个新元素并从中拉出背景颜色：

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

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

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

Answer 2

使用普通的javascript，你可以使用

获得一系列样式表

var sheets = document.styleSheets;

如果你回到长度＆gt; 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
    }
}

注意：如果从磁盘加载html文件（file：///），这似乎不适用于Google Chrome。其他浏览器未尝试过。

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

2 个答案: