说明

  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. [转帖]netperf - 网络测试工具

    1. 概述 Netperf是一种网络性能的测量工具,主要针对基于TCP或UDP的传输.Netperf根据应用的不同,可以进行不同模式的网络性能测试,即批量数据传输(bulk data transfer ...

  2. [转帖]银河麒麟高级服务器操作系统V10SP1安装Docker管理工具（Portainer+DockerUI）

    文章目录 一.系统环境配置 二.安装Docker 三.安装Docker管理工具 Docker管理工具之Portainer Portainer简介 Portainer安装 Portainer访问测试 D ...

  3. [转帖] Linux命令拾遗-剖析工具

    https://www.cnblogs.com/codelogs/p/16060472.html 简介# 这是Linux命令拾遗系列的第五篇,本篇主要介绍Linux中常用的线程与内存剖析工具,以及更高 ...

  4. [转帖]TCP之Nagle、Cork、Delay ACK（延迟确认）

    https://www.jianshu.com/p/167ba81206fb 参考资料 TCP协议中的Nagle算法 TCP中的Nagle算法 Linux下TCP延迟确认(Delayed Ack)机制 ...

  5. Core 文件的简单学习

    背景 最近公司内经常出现jvm进程宕机的情况. 宕机之后没有产生jvm的dump文件.比如xxx.hprof 但是产生了 core.$pid的文件. 曾经在aarch64架构上宕机时曾经想学习一下co ...

  6. 转载：ubuntu各个版本的发行时间和停止支持的时间，更新到最新版和代号。

    版本:20.10  代号:Groovy Gorilla  发布时间:2020/10/22 版本:20.04 LTS   代号:Focal Fossa  发布时间:2020/4/23 版本:19.10  ...

  7. Ant Design Vue 单文件上传Upload

    单文件上传 <a-upload name="file" :beforeUpload="beforeUpload" :multiple="fals ...

  8. 在K8S中，Pod生命周期包含哪些？

    在Kubernetes(简称K8s)中,Pod的生命周期经历了一系列状态变化.以下是Pod可能处于的一些主要状态: Pending: 当创建一个Pod时,它首先会进入Pending状态.这个状态下,K ...

  9. 19.8 Boost Asio 异或加密传输

    异或加密是一种对称加密算法,通常用于加密二进制数据.异或操作的本质是对两个二进制数字进行比较,如果它们相同则返回0,如果不同则返回1.异或加密使用一把密钥将明文与密文进行异或运算,从而产生密文.同时, ...

  10. 从嘉手札<2023-11-20>

    写给十年如一日的偶像--Faker "我看了一下,觉得视频还不够清晰,等我换一个清晰点的摄像头再回来直播,不要走开~" 繁星满天,流光飞逝. 世界是一场盛大的表演, 舞台上熙熙攘攘 ...