说明

  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. [转帖]Intel AVX 系列指令基础介绍

    https://zhuanlan.zhihu.com/p/437657452 一.发展背景 1993年,Intel公司推出了奔腾处理器,该类型处理器拥有两条执行流水线,和当时的处理器相比,可以同时执行 ...

  2. 银河麒麟系统信息获取V1.0版本

    银河麒麟系统信息获取 摘要 最近项目有一些兼容性测试需求. 可能需要获取一些系统配置信息便于相关的工作. 想着自己总结一下. 便于后续的不太熟悉的同事进行简要处理 银河麒麟获取版本 nkvers # ...

  3. UnixBench的简单测试与验证

    UnixBench的简单测试与验证 目标 飞腾2000+ (物理机和虚拟机) Intel Golden 6170 物理机 Intel Golden 5218 虚拟机 Gold 5218 CPU @ 2 ...

  4. Concat、Push、Spread syntax性能差异对比

    今天在力扣上做了一道数组扁平化的题,按理来说,应该熟能生巧了,但是在使用concat时候超出了时间限制,使用push可以通过,代码如下: /** * @describe 使用concat,超出时间限制 ...

  5. 从DevOps状态报告看技术团队的文化建设

    本文源自一次内部分享,借由此机会又把历年的DevOps状态报告翻看了一遍,其实大多数时候我们对于DevOps的理解都在于流程,工具,实践这些看得见摸得着的东西,但就像文末的几点思考所说的那样,我们一直 ...

  6. 源码学习之Spring容器创建原理

    1 前言 众所周知,Spring可以帮我们管理我们需要的bean.在我们需要用到这些bean的时候,可以很方便的获取到它,然后进行一系列的操作.比如,我们定义一个bean MyTestBean pub ...

  7. Lectures

    Copy and Paste 3(P9523) Problem Solution 转移方程中的"父问题枚举子问题寻找转移"可以转成"子问题寻找父问题主动转移"处 ...

  8. CTF&爬虫：掌握这些特征，一秒识别密文加密方式

    关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 前言 爬虫工程师在做加密参数逆向的时候,经常会遇到各种各样的加密算法.编码.混淆,每个算法都有其对应的特征,对于一些较小的网站, ...

  9. 程序员必备！10款实用便捷的Git可视化管理工具

    前言 俗话说得好"工欲善其事,必先利其器",合理的选择和使用可视化的管理工具可以降低技术入门和使用的门槛.我们在团队开发中统一某个开发工具的使用能够大大降低沟通成本,提高协作沟通效 ...

  10. Golang zip压缩文件读写操作

    创建zip文件 golang提供了archive/zip包来处理zip压缩文件,下面通过一个简单的示例来展示golang如何创建zip压缩文件: func createZip(filename str ...