使用JS获取当前应用的样式

Question

我正在看这篇文章 How to get the background color of an element using javascript?

确认如果你做了

div.style.color 

您将返回应用于div的颜色。

但是，如果样式在元素上内联应用，这似乎只会返回一个结果吗？

当通过样式表（或标签）应用样式而不是直接内联时，如何返回应用于元素的样式？

见下面的例子。

console.log(document.getElementById('content').style.backgroundColor);
console.log(document.getElementById('content').style.color);

#content {
  background-color: #000000;
  display: inline-block;
  height: 100px;
  width: 100px;
}

<div id="content" style="color:red;"></div>

的console.log（的document.getElementById（ '内容'）style.backgroundColor。）;

什么都不返回

的console.log（的document.getElementById（ '内容'）style.color。）;

返回红色

Answer 1

您需要使用getComputedStyle()来获取通过样式表分配的样式。

＆＃13;

＆＃13;

console.log(getComputedStyle(document.getElementById('content')).backgroundColor);
console.log(document.getElementById('content').style.color);

＆＃13;

#content {
  background-color: #000000;
  display: inline-block;
  height: 100px;
  width: 100px;
}

＆＃13;

<div id="content" style="color:red;"></div>

＆＃13;

＆＃13;

＆＃13;