文章/答案/技术大牛

发布

社区首页 >问答首页 >使用getComputedStyle动态显示div的背景色

问使用getComputedStyle动态显示div的背景色
EN

Stack Overflow用户

提问于 2021-09-08 20:35:17

回答 1查看 54关注 0票数 1

我正在为一个网站创建一个视觉样式表，它使用一个广泛的变量列表来定义颜色。对于每种颜色，我都创建了一个包含变量名的类的div。

有没有一种方法可以遍历页面上的每个div，并在每个div的变量名下添加背景颜色定义？

我找到了下面的脚本，但我不确定如何让它遍历页面并将颜色定义添加到每个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>

javascript

html

css

beautifulsoup

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-09-08 20:57:53

您可以在以下代码片段中尝试：

      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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69109380

复制

相似问题

问使用getComputedStyle动态显示div的背景色
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用getComputedStyle动态显示div的背景色EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用getComputedStyle动态显示div的背景色
EN