从 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;

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

你能给我一些建议吗？

提前谢谢。

Answer 1

1

您还可以使用节点 Element 上的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

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

然后你需要nextSibling返回紧跟其父子节点中指定节点的节点

 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>