javascript - 如何使用 javascript 获取元素背景

Question

访问由元素的类名设置的元素的 css 属性是否有任何收获。

对于第一个 div 元素，我附加了一个红色类，通过它我将红色设置为它的背景，当我尝试在 javascript 中访问 div 的背景色时我不能。当由 css 类设置时，使用 javascript 访问元素的 backgroundColor 的正确方法是什么

window.onload = function() {
  var div = document.querySelector('.red');
  console.log(div.style.backgroundColor);
  var div_2 = document.querySelector('div:nth-child(2)');
console.log(div_2.style.backgroundColor);
}

.red {
  background: red;
}
div:nth-child(2) {
  background: green;
}

<div class="red">
  Element1
</div>
<div id="div1">
  Element2
</div>

谢谢

Answer 1

元素没有在元素的 style 属性中设置 background-color。使用 window.getComputedStyle() 获取在 .css 文件中设置的元素计算样式。

window.onload = function() {
  var div = document.querySelector('.red');
  console.log(window.getComputedStyle(div).backgroundColor);
  var div_2 = document.querySelector('div:nth-child(2)');
  console.log(window.getComputedStyle(div_2).backgroundColor);
}

.red {
  background: red;
}
div:nth-child(2) {
  background: green;
}

<div class="red">
  Element1
</div>
<div id="div1">
  Element2
</div>