2021-06-28 CSS变量设置颜色

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

方朝端

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

阅读量567

点赞数

分类专栏： css html 原生js学习

本文链接：https://blog.csdn.net/seetoyou/article/details/118308235

版权

原生js学习同时被 3 个专栏收录

45 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

说明

css变量只能以[–]开头。
距离当前dom元素层级最近的父元素作用域css变量的值更容易生效。
css变量在css文件中只能以var()函数来使用。

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>css变量设置颜色</title>
</head>
<style>
  :root {/* //设置css变量作用域; */
    --theRoot: rgb(255, 255, 0);
    --fangBorder: rgb(255, 0, 0);
  }
  .myDiv {
    --theDiv: rgb(0, 255, 0);
    --fangBorder: rgb(0, 0, 255);
  }
  body {
    background: var(--theRoot);
    border: solid 5px var(--fangBorder);/* //css变量只能以var()函数来使用; */
  }

  .myDiv {
    width: 100px;
    height: 100px;
    background: var(--theDiv);
    border: solid 5px var(--fangBorder);
  }
</style>
<body>
  <div class="myDiv"></div>
</body>
<script>
  /* //不建议使用,和预期不符;虽然操作逻辑更统一;//仿阮一峰的改;
  setTimeout(() => {
    //let rootElement = document.documentElement;
    let rootElement = document.querySelector(":root");
    let rootStyles = rootElement.style;
    let rootStyleValue = rootStyles.getPropertyValue("--fangBorder");//只能读取通过js设置后的css变量;
    console.log("代码设置前: rootStyleValue--->", rootStyleValue);
    rootStyles.setProperty("--fangBorder", "rgb(255, 255, 255)");
    rootStyleValue = rootStyles.getPropertyValue("--fangBorder");
    console.log("代码设置后: rootStyleValue--->", rootStyleValue);

    let thisElement = document.querySelectorAll(".myDiv")[0];
    let thisStyles = thisElement.style;
    let thisStyleValue = thisStyles.getPropertyValue("--fangBorder"); // 读取变量;
    console.log("代码设置前: thisStyleValue--->", thisStyleValue);
    thisStyles.setProperty("--fangBorder", "#7F583F"); // 设置变量;
    thisStyleValue = thisStyles.getPropertyValue("--fangBorder");
    console.log("代码设置后: thisStyleValue--->", thisStyleValue);

    //thisStyles.removeProperty("--fangBorder"); // 删除变量;删除后,表现上会变成浏览器的默认值;//但此时使用getComputedStyle()来计算,依旧是自己在css里写的值;与预期不符,不建议使用这个方法来移除css文件里书写的css变量;
  }, 6000); */

  //建议实际场景里使用,与预期大致一样;
  setTimeout(() => {
    let rootElement = document.querySelector(":root");
    let rootStyles = getComputedStyle(rootElement);
    let rootStyleValue = rootStyles.getPropertyValue("--fangBorder");
    console.log("代码设置前: rootStyleValue--->", rootStyleValue);
    rootElement.style.setProperty("--fangBorder", "rgb(0, 0, 0)");
    rootStyleValue = rootStyles.getPropertyValue("--fangBorder");
    console.log("代码设置后: rootStyleValue--->", rootStyleValue);

    let thisElement = document.querySelectorAll(".myDiv")[0];
    let thisStyles = getComputedStyle(thisElement); // 计算并获取元素的样式表;计算出来的样式表只能只读;
    let thisStyleValue = thisStyles.getPropertyValue("--fangBorder"); // 计算并获取CSS变量;
    console.log("代码设置前: thisStyleValue--->", thisStyleValue);
    thisElement.style.setProperty("--fangBorder", "rgb(255, 255, 255)"); //设置CSS变量;
    thisStyleValue = thisStyles.getPropertyValue("--fangBorder");
    console.log("代码设置后: thisStyleValue--->", thisStyleValue);
  }, 3000);
</script>
</html>

来源:

方朝端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-28 CSS变量设置颜色

说明css变量只能以[–]开头。距离当前dom元素层级最近的父元素作用域css变量的值更容易生效。css变量在css文件中只能以var()函数来使用。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
复制链接

扫一扫