获取从类*而不是* style属性继承的元素样式

Question

如何从样式表/样式标签中获取div的样式并以编程方式忽略元素样式？

e.g。

＆＃13;

＆＃13;

var alice = 'alice ' + $('.alice').css('color');
var boblice = 'alice ' + $('.bob').css('color');
var bob = 'bob ' + $('.bob').css('color');

$('#result').text(
alice + '\n' + bob
);

$('#expected').text(
boblice + '\n' + bob
);

var elem1 = document.getElementById("alice");
alicestyle = window.getComputedStyle(elem1, null);

console.log(alicestyle);

＆＃13;

.alice {
  color:green;
}

.bob {
  color:green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='alice' class="alice" style="color:red">
test
</div>

<div id = 'bob' class="bob">
test
</div>

result:
<div id="result">

</div>

expected:
<div id="expected">

</div>

getComputedStyle:
<div id="computed">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

好吧，我不认为你可以直接从样式表中获得风格。但我认为您可以使用以下代码来解决此问题：

if( typeof( $('#alice').attr('style') ) != 'undefined' ) { 
   $('#alice').removeAttr('style'); 
   var aliceSheets = $('.alice').css('color');
   console.log(aliceSheets);
} 

如果您只想在不更改元素样式的情况下获取样式，则可以在阅读颜色后添加style属性。