从div的第一个子级获取背景色

Question

我有这样的代码：

<div id="my-color-picker-1" class="color-picker jcolor-picker"> 
   <div data-type="btn" style="background: rgb(150,78,78)"></div>
</div>

我想要这个颜色：rgb(150,78,78)；

我试过这样做：

let x = document.getElementsByClassName("color-picker").firstChild;

但我有一个未定义的错误。

你能给我一些建议吗？

提前进行Thx检查。

Answer 1

1

您还可以在节点元素上使用children属性来获取背景。

​

let elements = document.getElementsByClassName("color-picker");
const background = elements[0].children[0].style.background;
console.log( background );

<div id="my-color-picker-1" class="color-picker jcolor-picker"> 
   <div data-type="btn" style="background: rgb(150,78,78)"></div>
</div>

​

2

​

let element = document.getElementsByClassName("color-picker")[0]
const bgColor = element.firstElementChild.style.background;
console.log( bgColor );

<div id="my-color-picker-1" class="color-picker jcolor-picker"> 
   <div data-type="btn" style="background: rgb(150,78,78)"></div>
</div>

​

Answer 2

将返回树中节点的第一个子节点。

然后需要返回紧跟在其父节点的childNodes中指定节点之后的节点

​

let bgColor = document.querySelector("#my-color-picker-1").firstChild.nextSibling.style.backgroundColor

console.log(bgColor);

<div id="my-color-picker-1" class="color-picker jcolor-picker">
  <div data-type="btn" style="background: rgb(150,78,78)"></div>
</div>

​