javascript - 获取从类 *not* style 属性继承的元素样式

Question

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

例如

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

.alice {
  color:green;
}

.bob {
  color:green;
}

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

---

Answer 1

好吧，我认为您不能直接从样式表中获取样式。但我认为您可以使用以下代码来解决问题:

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

如果只想获取样式而不改变元素的样式，则可以在读取颜色后添加 style 属性。