说明

  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. [转帖]TiFlash DeltaTree 存储引擎设计及实现分析 - Part 1

    https://tidb.net/book/book-rush/features/tiflash-code/tiflash-deltatree TiFlash 是 TiDB 的分析引擎,是 TiDB ...

  2. [转帖]金仓数据库KingbaseES V8R6 中unlogged表

    KingbaseESV8R6有一种表称为unlogged,在该表新建的索引也属于unlogged.和普通表的区别是,对该表进行DML操作时候不将该表的变更记录变更写入到wal文件中.在数据库异常关机或 ...

  3. [转帖]Linux中最全shell命令&常用注意事项

    在编辑linux脚本中不断的会用到复杂的脚本编辑,写文章记录. Linux命令大全(手册) – 真正好用的Linux命令在线查询网站 目录 推荐书籍: Linux常用命令 Linux 常用命令 在li ...

  4. [转帖]「更易用的OceanBase」｜OceanBase 4.0 一体化安装包 - 把简单留给用户

    https://www.modb.pro/db/565842 1. OceanBase 3.x 版本安装浅谈 我是在 OceanBase 3.1.4 版本的时候开始尝试入手测试的.刚开始 OB 3.x ...

  5. vim配置的学习与总结

    摘要 有时候在linux里面操作需要使用粘贴以及其他处理. 很多发行版, 遇到 # 会自动退格, 很难受. 想着能够处理一下vim的默认设置可以好很多. 所以这里简单总结一下. 配置文件 vim的配置 ...

  6. 【K哥爬虫普法】倒计时21天！事关爬虫er们能否平安回家过年！

    我国目前并未出台专门针对网络爬虫技术的法律规范,但在司法实践中,相关判决已屡见不鲜,K 哥特设了"K哥爬虫普法"专栏,本栏目通过对真实案例的分析,旨在提高广大爬虫工程师的法律意识, ...

  7. docker 推送镜像到harbor

    服务器A的镜像要推送到已安装harbor的服务器B 1.修改服务器A的/etc/docker/daemon.json文件 其中,http://211.131.241.221:8888为你要推送的服务器 ...

  8. 从零开始配置vim(24)——自动补全

    neovim 自带的代码补全的效果并不好,而且它分为好多类,如果需要人为的去判断使用路径补全.使用当前buffer中的单词补全.亦或者使用include 来进行补全,那样使用起来就很不方便了.针对代码 ...

  9. WebAssembly入门笔记[3]：利用Table传递引用

    在<WebAssembly入门笔记[2]>中,我们介绍了如何利用Memory在作为宿主的JavaScript应用和wasm模块之间传递数据,但是Momory面向单纯二进制字节的读写在使用起 ...

  10. 7.5 Windows驱动开发：监控Register注册表回调

    在笔者前一篇文章<内核枚举Registry注册表回调>中实现了对注册表的枚举,本章将实现对注册表的监控,不同于32位系统在64位系统中,微软为我们提供了两个针对注册表的专用内核监控函数,通 ...