js取到css样式变量，修改后让它自动运用到css里面去

xiaofei0627

于 2019-06-06 17:52:31 发布

阅读量6.8k

点赞数 3

分类专栏： css javascript 文章标签： js取到css样式变量修改后让它自动运用到css里面去

本文链接：https://blog.csdn.net/qq_39953537/article/details/91047839

版权

javascript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

如下代码，我们点击#div 这个元素改变css样式变量，然后其他的p元素的样式也会改变。
在这里插入图片描述

<!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" />
    <title>Document</title>
    <style>
      :root {
        --color: red;
      }

      #div {
        margin: 100px auto;
        width: 200px;
        height: 200px;
        background-color: var(--color);
        cursor: pointer;
      }
      p {
        text-align: center;
        color: var(--color);
      }
    </style>
  </head>
  <body>
    <div id="div"></div>
    <p>hello</p>
    <p>blog</p>
  </body>
  <script>
    const div = document.querySelector("#div");
    const htmlStyle = document.documentElement.style;
    div.onclick = function() {
      if (htmlStyle.getPropertyValue("--color").trim() === "blue") {
        htmlStyle.setProperty("--color", "red");
      } else {
        htmlStyle.setProperty("--color", "blue");
      }
      console.log(htmlStyle.getPropertyValue("--color").trim());
    };
  </script>
</html>

参考链接
http://www.ruanyifeng.com/blog/2017/05/css-variables.html

xiaofei0627

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
js取到css样式变量，修改后让它自动运用到css里面去

如下代码，我们点击#div 这个元素改变css样式变量，然后其他的p元素的样式也会改变。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, ...
复制链接

扫一扫