说明

  1. css变量只能以[–]开头。
  2. 距离当前dom元素层级最近的父元素作用域css变量的值更容易生效。
  3. 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>

来源:

  1. CSS 变量教程;
  2. CSS变量（自定义属性）实践指南;

2021-06-28 CSS变量设置颜色的更多相关文章

  1. CSS变量（自定义属性）实践指南

    本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处:葡萄城官网,葡萄城为开 ...

  2. 超链接字体颜色设置(通过html/css的设置方法)

    超链接字体颜色设置是通过css来设置,a链接的颜色设置常用的有以下两种,1.超链接a的初始状态颜色,2.超链接字体的鼠标滑过颜色,还有两种病不常用:3.超链接字体的已访问颜色,4.超链接字体在按下鼠标 ...

  3. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  4. css颜色属性及设置颜色的地方

    css颜色属性 在css中用color属性规定文本的颜色. 默认值是not specified 有继承性,在javascript中语法是object.style.color="#FF0000 ...

  5. 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色，如何使用火狐浏览器的Firebug插件查看网页的字体

    一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体 ...

  6. CSS 文本字体颜色设置方法(CSS color)

    CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...

  7. 原生CSS设置网站主题色—CSS变量赋值

    定义CSS变量 在css文件顶部定义css变量,注意必须以--开头,使用:root包括这几个变量 :root { --main-bg-color: #ff7675; --color1: #fbfee9 ...

  8. 引人瞩目的 CSS 变量（CSS Variable）

    这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...

  9. 第一个CSS变量：currentColor

    一.基本介绍 CSS变量正慢慢地从最初的草案到浏览器实现.但规范中有个已经存在多年的变量:currentColor.这个CSS特性具有良好的浏览器支持和一些实际的应用,本篇文章,我们来学习和了解它. ...

  10. CSS变量variable

    前面的话 一直以来,CSS中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器.新的草案发布之后,直接在 CSS 中定义和使用变量不再是幻想了.本文将详细介绍CS ...

随机推荐

  1. [转帖]ntp和chrony

    https://www.cnblogs.com/hiyang/p/12682234.html#:~:text=chrony%20%E7%AE%80%E4%BB%8B%20chrony%20%E6%98 ...

  2. Python学习之五_字符串处理生成查询SQL

    Python学习之五_字符串处理生成查询SQL 前言 昨天想给同事讲解一下获取查询部分表核心列信息的SQL方法 也写好了一个简单文档. 但是感觉不是很优雅. 最近两三天晚上一直在学习Python. 想 ...

  3. [转帖]Linux 内核 | 网络流量限速方案大 PK

    https://maimai.cn/article/detail?fid=1674483493&efid=UXVPILU_JTlqLrYhTkDStA 网络流量限速是一个经久不衰的话题,Lin ...

  4. [转帖]关于iostat的问题，svctm数据不可信

    使用FIO对磁盘进行压力测试,使用1个线程对磁盘进行随机读,设置单次read的数据块分别为128KB和1M,数据如下: (1)单次IO数据块为128KB (2)单次IO数据块为1M 从上面的数据可以看 ...

  5. pymongo中针对指定集合更新validator规则

    问题描述: 针对mongo中已创建的集合,更新validator验证器规则 解决方法 在确保pymongo中所使用的用户对目标数据库具有dbAdmin之类的管理权限的前提下(若无权限,可在mongo中 ...

  6. vs不同版本支持的c++版本和PlatformToolset，及在vs中切换c++版本

    找c++资料从网上找确实更快速,但要想深入地理解vc++建议看msdn文档. vs不同版本支持的c++版本 C++17: vs2017基本支持,vs2015部分支持. C++14: vs2017就可以 ...

  7. 多智能体强化学习算法【三】【QMIX、MADDPG、MAPPO】

    相关文章: 常见多智能体强化学习仿真环境介绍[一]{推荐收藏,真的牛} 多智能体强化学习算法[一][MAPPO.MADDPG.QMIX] 多智能体强化学习算法[二][MADDPG.QMIX.MAPPO ...

  8. 遥感图像处理笔记之【Machine Learning CS-433 - Class Project 2 - Road Segmentation - EPFL】

    遥感图像处理学习(8) 前言 遥感系列第8篇.遥感图像处理方向的学习者可以参考或者复刻 本文初编辑于2024年1月2日 本文再编辑于2024年1月4日:附作者改进U-Net网络图片:文字补充说明 20 ...

  9. P4747 [CERC2017] Intrinsic Interval 题解

    题目链接:Intrinsic Interval 讲讲析合树如何解决这种问题,其实这题很接近析合树的板题的应用. 增量法进行析合树建树时,需要用 ST 表预处理出 \(max\) 和 \(min\) 以 ...

  10. OpenGL的模板缓冲

      注意看,利用OpenGL的模板缓冲,可以轻松实现很多酷炫的效果.当然,它用起来也很简单.下面就跟着博主小编,一起来看看吧! 模板缓冲的使用   假设有个大小为800x600的窗口,那么模板缓冲也是 ...