получить .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 
    } 
} 

Примечание: Это, кажется, не работает в Google Chrome, если вы загружаете HTML файл с диска (файл: ///). Другие браузеры не пробовали.

Answer 2

Вместо проверки существующего элемента, который может иметь другие классы переопределение, просто сделать новый элемент и потянуть цвет фона от этого:

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

редактировать: видимо, вам нужно мгновенно добавить элемент в дом, чтобы на самом деле получить фоновый цвет. Этот код работает (проверено):

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