如何更改数组中元素的背景颜色答案

【问题标题】：How can I change the background color of element in an array如何更改数组中元素的背景颜色
【发布时间】：2021-10-16 18:21:43
【问题描述】：

我有一个包含 5 个 div 的数组

`<div id="cap-left2"</div>`
`<div id="cap-left1"</div>`
`<div id="cap-base"</div>`
`<div id="cap-right1"></div>`
`<div id="cap-right2"</div>`

所有这些 div 都有背景。在我的 javascript 中，我有：

let items = [capBase,capLeft1,capLeft2,capRight1,capRight2];

这行得通：

`var tom = items[Math.floor(Math.random()*items.length)]
console.log(tom)`

这行得通

`var tom = items[Math.floor(Math.random()*items.length)]`
`console.log(tom.style)`

但我想要 backgroundColor 并且这些都不起作用：

`var tom = items[Math.floor(Math.random()*items.length)]`
`console.log(tom.style.background)`


`var tom = items[Math.floor(Math.random()*items.length)]`
`console.log(tom.style.backgroundColor)`

我想做的是假设我有 5 个样本，由数组中的 5 个元素表示。我希望能够有一个按钮，让我可以随机化填充每个元素的颜色

任何帮助将不胜感激

【问题讨论】：

缺少 > ？数组中的名称与 html id 不匹配？ tom.style 看起来很不稳定。
如果您对此提出质疑，我敢打赌您很快就会得到答案。 :-)

标签： javascript html random

【解决方案1】：

element.style 表示元素的样式，仅当存在style 属性时才会填充（也称为内联样式），CSS 样式不会影响该对象。因此，element.style.backgroundColor 将为空，除非元素具有 style="background-color: red;" 作为属性。如果您需要获取元素的实际渲染样式，请使用 window.getComputedStyle(element).backgroundColor

document.querySelectorAll("div").forEach( div =>
{
  console.log("style: " + div.style.backgroundColor, "final: " + window.getComputedStyle(div).backgroundColor, div);
});

body > div[id]
{
  width: 1em;
  height: 1em;
  background-color: green;
  border: 1px solid black;
}

<div id="cap-left2"></div>
<div id="cap-left1" style="background-color: red;"></div>
<div id="cap-base"></div>
<div id="cap-right1"></div>
<div id="cap-right2"></div>

【讨论】：

对不起。我没有 f5 页面并重新回答了你已经解决的问题。

【解决方案2】：

const xx = window.getComputedStyle(searchBtn).getPropertyValue('background-color')
console.log(xx)

您只能通过 styleproperty 访问内联 css 属性值。你需要getComputedStyle

【讨论】：