在html中css中背景颜色通过变量的形式引入-Toy模板网

这篇具有很好参考价值的文章主要介绍了在html中css中背景颜色通过变量的形式引入。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

什么情况可能使用

	如果你写的页面已经是设计，ui设计好的，通过页面的标签内容颜色是统一的，并且有些内容颜色是统一的，这个时候我们就可以用到变量。

<!DOCTYPE html>
<html>
  <head>
    <title>使用变量表示颜色的示例</title>
    <style>
      /* 定义变量 */
      /* :root {
        --primary-color: #007bff;
        --secondary-color: #6c757d;
      } */

      /* 使用变量 */
      body {
        background-color: var(--primary-color);
        color: var(--secondary-color);
      }
    </style>
  </head>
  <body>
    <h1>这是一个使用变量表示颜色的示例</h1>
    <p>主要颜色为蓝色，次要颜色为灰色。</p>

    <script>
      // 使用 JavaScript 动态修改变量值
      document.documentElement.style.setProperty('--primary-color', 'skyblue');
    </script>
  </body>
</html>

进阶点的写法

<!DOCTYPE html>
<html>
  <head>
    <title>使用对象中的变量表示颜色的示例</title>
    <style>
      /* 定义变量 */
      :root {
        --primary-color: #007bff;
        --secondary-color: #6c757d;
        --accent-color: #ffc107;
      }

      /* 使用变量 */
      body {
        background-color: var(--primary-color);
        color: var(--secondary-color);
      }

      h1 {
        color: var(--accent-color);
      }
      div {
        color: var(--hello-color);
      }
    </style>
  </head>
  <body>
    <h1>这是一个使用对象中的变量表示颜色的示例</h1>
    <p>主要颜色为蓝色，次要颜色为灰色，强调颜色为黄色。</p>
    <div>你好世界</div>
    <script>
      // 定义颜色变量对象
      const colors = {
        primary: 'skyblue',
        secondary: 'red',
        accent: 'orange',
        hello: 'blue'
      };

      // 封装设置变量值的函数
      function setColors(colors) {
        Object.entries(colors).forEach(([key, value]) => {
          document.documentElement.style.setProperty(`--${key}-color`, value);
        });
      }

      // 使用函数设置变量值
      setColors(colors);
    </script>
  </body>
</html>