Question

我正在尝试获取每个子元素的背景颜色。

var arr = [];
for(var c = 0; c < 5; c++){
    var temp = div.children[c].style.backgroundColor;
    arr[c] = temp;
}

我似乎无法理解为什么它不起作用，因为当我使用下面的代码时，它起作用了

div.children[c].style.backgroundColor = "#eee";

Answer 1

Window.getComputedStyle()方法在应用活动样式表并解析这些值可能包含的任何基本计算后，会提供元素的所有 CSS 属性的值。

HTMLElement.style属性返回一个CSSStyleDeclaration对象，该对象仅代表 element's inline style attribute ，忽略任何已应用的样式规则。

HTMLElement.style仅适用于inline-css，使用getComputedStyle(Element)获取与style相关联的所有Element个对象。

注意：我会使用Array#push而不是在指定的index分配值。

var arr = [];
for (var c = 0; c < 5; c++) {
  var temp = getComputedStyle(div.children[c]).backgroundColor;
  arr.push(temp);
}

Answer 2

避免自定义创建数组的替代方法。

Array.map.call

var div = document.getElementById("text");
var arr = Array.prototype.map.call(div.children, function(el) {
  return window.getComputedStyle(el).backgroundColor;
})
console.log(arr)

<div ID="text">
  <span style="background-color:rgb(200,20,20)">1</span>
  <span style="background-color:rgb(250,150,150)">2</span>
  <span style="background-color:rgb(150,100,0)">2</span>
</div>

使用循环获取每个孩子的样式属性

2 个答案:

Array.map.call