It's possible to get background color behind div?

Question

It's possible to get background color behind div? I want to get green color behind dark using js. Can i based on dark block position and get background color without parent or parent with id?

<div style="background-color: #2eaa69; padding: 40px; box-sinzg: border-box width: 100%;">
  <div>
    <div>
      <div>
        <div>
           <div style="background-color: #223344; padding: 20px; color: #fff; text-align: center">
    get color behind this block
  </div>
        </div>
      </div>
    </div>
  </div>
</div>

Keith · Accepted Answer · 2018-11-08T11:07:21.340

You can access the parentElement, and then get the color from the style.

eg.

const b = document.querySelector("#behindthis");
console.log(b.parentElement.style.backgroundColor);

<div style="background-color: #2eaa69; padding: 40px; box-sinzg: border-box width: 100%;">
  <div id="behindthis" style="background-color: #223344; padding: 20px; color: #fff; text-align: center">
    get color behind this block
  </div>
</div>

One thing to take note, if your style is from CSS you can also use getComputedStyle.

update: just noticed the div within div, etc. To get the background color here, you could traverse up the parents while the color is transparent. So I've updated the answer to have a bkColor function.

const b = document.querySelector(".this-box");

function bkColor(b) {
  const cc = window.getComputedStyle(b);
  if (cc.backgroundColor === `rgba(0, 0, 0, 0)`) {
    if (b.parentElement) return bkColor(b.parentElement);
  }
  return cc.backgroundColor;
}

console.log(bkColor(b.parentElement));

.parent-box {
  background-color: #2eaa69;
  padding: 40px;
}

.this-box {
  background-color: #223344;
  padding: 20px;
  color: #fff;
  text-align: center;
}

<div class="parent-box">
  <div>
    <div class="this-box">
      get color behind this block
    </div>
  </div>
</div>

`function bkColor(b)` helped me! Thanks – Marty Nov 08 '18 at 11:21 — Marty, Nov 08 '18 at 11:21

score 0 · Answer 2 · answered Nov 08 '18 at 10:51

0

Yeah you can get the parent div if you have the front div element:

let backgroundDiv = document.getElementById("frontDiv").parentElement;
console.log(backgroundDiv.style.background);

answered Nov 08 '18 at 10:51

BullshitPingu

79
2
6

score 0 · Answer 3 · answered Nov 08 '18 at 10:51

If you give the black box an id or class you can get the background divs rgb color (ie its parent's div color) by doing the following:

const block = document.querySelector('#block');
const greenBlock = block.parentElement;
console.log(greenBlock.style.backgroundColor);

<div style="background-color: #2eaa69; padding: 40px; box-sinzg: border-box width: 100%;">
  <div id="block" style="background-color: #223344; padding: 20px; color: #fff; text-align: center">
    get color behind this block
  </div>
</div>

If you wish to convert the rgb to the the hex representation of the color you can see this answer.

score 0 · Answer 4 · answered Nov 08 '18 at 10:52

Yes, you can access both the child and parent div style properties with javascript and set the child's background value to that of the parent.

See below:

let parentDiv = document.querySelector("body > div");
let childDiv = document.querySelector("div > div");

childDiv.style.backgroundColor = parentDiv.style.backgroundColor

<div style="background-color: #2eaa69; padding: 40px; box-sinzg: border-box width: 100%;">
  <div style="background-color: #223344; padding: 20px; color: #fff; text-align: center">
    get color behind this block
  </div>
</div>

It's possible to get background color behind div?

4 Answers4