说明

  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. [转帖]Debian9换源(阿里源)（Linux子系统）

    http://www.taodudu.cc/news/show-5410026.html?action=onClick 默认你已经装好Linux子系统. Step 0: 换源核心就是把/etc/apt ...

  2. 【转帖】route命令详解大全(route命令使用实例)

    https://www.cxdtop.cn/n/225987.html 在实际的网络应用中,我们可能会遇到这样的网络环境,上外网我们使用的无线网络,内网我们使用的是有限网卡.在设置完成后会出现外网和内 ...

  3. CS231N Assignment1 softmax 笔记

    -为Softmax分类器实现完全矢量化的损失函数 -实现解析梯度完全矢量化的表达式 使用数值梯度检查实现结果 使用验证集调整学习率和正则化强度 使用SGD优化损失函数 可视化最终学习的权重 softm ...

  4. 手写模拟Spring底层原理-Bean的创建与获取

    作者:京东物流 张鼎元 1 引言 大家好,相信大家对Spring的底层原理都有一定的了解,这里我们会针对Spring底层原理,在海量的Spring源代码中进行抽丝剥茧手动实现一个Spring简易版本, ...

  5. iframe 在线预览pdf、word、excel、ppt、txt、图片、视频

    第一种方式通过 iframe 在线预览 pdf,word,excel,ppt,txt,图片,视频 <template> <el-button @click="openHan ...

  6. ts函数讲解与不确定参数是否使用以及限制返回类型

    1.声明式函数 函数有两个参数 参数的数据类型是 string number 返回值值 number 哈 function person(name: string, age: number): num ...

  7. 即时通讯（IM）开源项目OpenIM每周迭代版本发布-音视频实时通话-v2.0.4

    介绍 OpenIM每周五发布新版,包括新特性发布,bug修复,同时合并PR 由于2.0版本重构完毕,架构更清晰,代码更规范,先邀请各位参与OpenIM社区建设,包括技术开发,技术分享等,特性开发,性能 ...

  8. Prompt learning 教学基础篇：prompt基本原则以及使用场景技巧助力你更好使用chatgpt，得到你想要的答案

    Prompt learning 教学[基础篇]:prompt基本原则以及使用场景技巧助力你更好使用chatgpt,得到你想要的答案 如果你想系统学习 如果你对 AI 和 Prompt Engineer ...

  9. 3.1 DLL注入：常规远程线程注入

    动态链接库注入技术是一种特殊的技术,它允许在运行的进程中注入DLL动态链接库,从而改变目标进程的行为.DLL注入的实现方式有许多,典型的实现方式为远程线程注入,该注入方式的注入原理是利用了Window ...

  10. C/C++ 关于运算符重载笔记

    加号运算符重载: 重载加号运算符,让 p3 = p1 + p2 改成 p3.mage = p1.mage + p2.mage 实现两个数据成员的相加. 告诉编译器,两个类中的数据成员应该怎么相加. 成 ...