JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<div style="background-color: red">
  <div>
    <div style="background-color: transparent">
      <div>
        <p id="target">I'd like to know that the background-color here is red</p>
      </div>
    </div>
  </div>
</div>

JavaScript

function getBackground(jqueryElement) {
  // Is current element's background color set?
  var color = jqueryElement.css("background-color");

  if (color !== 'rgba(0, 0, 0, 0)') {
    // if so then return that color
    return color;
  }

  // if not: are you at the body element?
  if (jqueryElement.is("body")) {
    // return known 'false' value
    return false;
  } else {
    // call getBackground with parent item
    return getBackground(jqueryElement.parent());
  }
}

$(function() {
  alert(getBackground($("#target")));
});