Get background color from the first child of a div

Question

I have this code :

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

I want to get this color : rgb(150,78,78);

I tried like this :

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

But I have an undefined error.

Can you please give me some advices ?

Thx in advance.

What about `document.getElementsByClassName("color-picker")[0]`? — evolutionxbox, Apr 06 '21 at 10:03
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — evolutionxbox, Apr 06 '21 at 10:04
What about this one? `document.getElementsByClassName("color-picker").childNodes[0];` — Gilles Heinesch, Apr 06 '21 at 10:05
@GillesHeinesch no, because `getElementsByClassName` doesn't have that property — evolutionxbox, Apr 06 '21 at 10:07
Because `getElementsByClassName` returns a "collection", not a single item — freedomn-m, Apr 06 '21 at 12:23

DecPK · Answer 1 · 2021-04-06T10:15:30.987

1

You can also get the background using children property on the node Element also.

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>

score 0 · Answer 2 · answered Apr 06 '21 at 10:11

firstChild will return you the node's first child in the tree.

Then you need nextSibling that returns the node immediately following the specified one in their parent's 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>

Get background color from the first child of a div

2 Answers2