在html中css中背景颜色通过变量的形式引入

最新推荐文章于 2023-11-21 08:52:38 发布

前端交互仔

最新推荐文章于 2023-11-21 08:52:38 发布

阅读量795

点赞数

分类专栏： CSS) 文章标签： html css 前端

本文链接：https://blog.csdn.net/liulang68/article/details/131605488

版权

CSS) 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

什么情况可能使用

	如果你写的页面已经是设计，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>

前端交互仔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在html中css中背景颜色通过变量的形式引入

//* 定义变量 *//* :root {} *//* 使用变量 */bodyvar;colorvar;</</</</// 使用 JavaScript 动态修改变量值'skyblue';</</</
复制链接

扫一扫