Show div's background-color dynamically using getComputedStyle

Question

I am creating a visual style sheet for a website that uses an extensive list of variables to define colors. For each of the colors, I have created a div with a class containing the variable name.

Is there a way to walk each of the divs on the page and add the background-color definition below the variable name in each of the divs?

I found the script below, but I am not sure how to get it to walk the page and add the color definition to each div.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Description" content="Enter your description here" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <title>Oral Health Color Pallet</title>
  </head>

  <body onload="myFunction()">

    <div class="container py-5 text-center">
      <h1>Background Colors</h1>
      <div class="row row-cols-2 text-white">
        <div id="test" class="col bg-secondary p-5">
          <h2>bg-secondary</h2>
          <span id="demo"></span>
        </div>
        <div class="col bg-primary p-5">
          <h2>bg-primary</h2>
        </div>
        <div class="col bg-success p-5">
          <h2>bg-success</h2>
        </div>
        <div class="col bg-info p-5">
          <h2>bg-info</h2>
        </div>
        <div class="col bg-warning p-5">
          <h2>bg-warning</h2>
        </div>
        <div class="col bg-danger p-5">
          <h2>bg-danger</h2>
        </div>
      </div>
    </div>
    <div class="container py-5 text-center">
      <h1>Gradients</h1>
      <div class="row row-cols-2">
        <div class="row row-cols-2 text-white">
          <div class="col bg-gradient-secondary p-5">
            <h2>bg-secondary</h2>
          </div>
          <div class="col bg-gradient-primary p-5">
            <h2>bg-primary</h2>
          </div>
          <div class="col bg-gradient-success p-5">
            <h2>bg-success</h2>
          </div>
          <div class="col bg-gradient-info p-5">
            <h2>bg-info</h2>
          </div>
          <div class="col bg-gradient-warning p-5">
            <h2>bg-warning</h2>
          </div>
        </div>
      </div>
    </div>
    </div>
    <script>
      function myFunction() {
        var elem = document.getElementById("test");
        var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
        document.getElementById("demo").innerHTML = theCSSprop;
      }
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
  </body>

</html>

Inline event handlers like `onload` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Note that there are [much better alternatives](/q/14028959/4642212) to a `load` listener like `defer` or `DOMContentLoaded`. Familiarize yourself with the [DOM API](//developer.mozilla.org/docs/Web/API/Document_Object_Model). How is Beautiful Soup related? — Sebastian Simon, Sep 08 '21 at 20:41
The variables are in my local SASS overrides. I want to be able to use the resulting code to create a style guide that shows the hex colors for refference. — J. Patrick Moran, Sep 10 '21 at 14:32

score 1 · Accepted Answer · edited Sep 09 '21 at 20:34

You can try like in the following snippet:

      function myFunction() {
    let elems = document.querySelectorAll(".col");
    elems.forEach(elem => {
      let theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
      let gradient = window.getComputedStyle(elem, null).getPropertyValue("background-image");
      let title = elem.querySelector("h2")
      let hex = rgb2hex(theCSSprop)
      title.insertAdjacentHTML('afterend', `<span>${hex}</span><br/><span>${gradient}</span>`);
    })
  }
  let rgb2hex = c => '#' + c.match(/\d+/g).map(x => (+x).toString(16).padStart(2, 0)).join``

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Description" content="Enter your description here" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <title>Oral Health Color Pallet</title>
<style>
.bg-gradient-blue-radial {
background-image: radial-gradient(at 91% 100%, #00a1e4 1%, #1f4282 100%);
color: #fff;
}
</style>
  </head>

  <body onload="myFunction()">

    <div class="container py-5 text-center">
      <h1>Background Colors</h1>
      <div class="row row-cols-2 text-white">
        <div id="test" class="col bg-secondary p-5">
          <h2>bg-secondary</h2>
          <span id="demo"></span>
        </div>
        <div class="col bg-primary p-5">
          <h2>bg-primary</h2>
        </div>
        <div class="col bg-success p-5">
          <h2>bg-success</h2>
        </div>
        <div class="col bg-info p-5">
          <h2>bg-info</h2>
        </div>
        <div class="col bg-warning p-5">
          <h2>bg-warning</h2>
        </div>
        <div class="col bg-danger p-5">
          <h2>bg-danger</h2>
        </div>
      </div>
    </div>
    <div class="container py-5 text-center">
      <h1>Gradients</h1>
      <div class="row">
        <div class="row row-cols-2 text-white">
          <div class="col bg-gradient-blue-radial p-5">
            <h2>bg-blue-radial</h2>
          </div>              
          </div>
        </div>
      </div>
    </div>
    </div>
    <script>
      
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
  </body>

</html>

Is there a way to convert the RGB to a HEX and display it above the RGB value — J. Patrick Moran, Sep 08 '21 at 21:54
Thanks for the help! This is a great way to view bootstrap color definitions for customized stylesheets and additional colors. — J. Patrick Moran, Sep 08 '21 at 22:14
Is there a way to convert the gradient rgb to hex as well? I updated the code with a gradient style and added the background-image class to the script — J. Patrick Moran, Sep 09 '21 at 20:31

Show div's background-color dynamically using getComputedStyle

1 Answers1