【CSS】css变量_css 变量-程序员宅基地

1、css变量

有的网站都会有自己的主题色，例如饿了么：
在这里插入图片描述
所以很对元素都会用到这些颜色，例如某些字体颜色，弹框提示颜色等等。

如果每次用到的时候，都使用十六进制的颜色表示，那么效率十分低，并且如果万一有一天需要更换主题颜色，那么一个一个更改，是十分繁琐的。

为了解决以上问题，css引入了变量。

CSS变量可以访问 DOM，可以创建具有局部或全局范围的变量，使用 JavaScript 和媒体查询来修改变量。var() 函数用于插入 CSS 变量的值。全局变量可以在整个文档进行访问使用，局部变量只能在声明它的选择器内部使用。

例如：

:root{
     
  --bg-color: #cccccc;
}
.father{
     
  background-color: var(--bg-color);
}

:root声明的是全局变量，如果是一个自定义属性用–作为前缀，使用时比如: var(–bg-color)就和#cccccc相等。

好处:

1.可维护性
如果没有CSS变量需要手动改变大量的属性值，使用批量处理查找和替换，可能会影响其他样式规则。使用CSS变量只用改变定义时的值。
2.提高CSS可读性
可以通过变量名判断属性内容

注意事项：使用CSS变量要注意大小写敏感，不要把长度的变量用于颜色属性等。

2、实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
      
            --bg-color: #1e90ff;
            --font-color: #cccccc;
        }

        #app {
      
            width: 100px;
            height: 100px;
            background-color: var(--bg-color);
            color: var(--font-color);
        }
    </style>
</head>

<body>
    <div id="app">
        <p>Hello World!</p>
    </div>
    <br />
    <button onclick="changeColor()">切换背景色</button>
    <script>
        function changeColor() {
      
            console.log(document.documentElement.style);
            document.documentElement.style.setProperty('--bg-color', 'black');
            document.documentElement.style.setProperty('--font-color', 'white');
        }
    </script>
</body>

</html>

在这里插入图片描述
点击变色按钮后：

本文链接：https://blog.csdn.net/ZHANGYANG_1109/article/details/124924797

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

在ubuntu 8.04下安装Oracle 11g二-程序员宅基地

文章浏览阅读408次。在ubuntu 8.04下安装Oracle 11g2008年05月22日星期四 11:02oracle 11g 数据库虽然提供了linux x86的版本，但是支持的linux版本只有Red Hat，Novell and Solaris 这几个，debian 和 ubuntu 不在支持之列，所以在ubuntu下安装就相对麻烦一些，请照着下文的方法一步一步的安装，不

初一计算机知识点下册,初一英语下册语法知识点全汇总-程序员宅基地

文章浏览阅读166次。新东方在线中考网整理了《初一英语下册语法知识点全汇总》，供同学们参考。一. 情态动词can的用法can+动词原形，它不随主语的人称和数而变化。1. 含有can的肯定句：主语+can+谓语动词的原形+其他。2. 含有can的否定句：主语+can't+动词的原形+其他。3. 变一般疑问句时，把can提前：Can+主语+动词原形+其他? 肯定回答：Yes，主语+can。否定回答：No，主语+can't...._七年级下册计算机知识点

NX/UG二次开发—其他—UFUN函数调用Grip程序_uf调用grip-程序员宅基地

文章浏览阅读3k次。在平时开发中，可能会遇到UFUN函数没有的功能，比如创建PTP的加工程序（我目前没找到，哪位大神可以指点一下），可以使用Grip创建PTP，然后用UFUN函数UF_call_grip调用Grip程序。具体如下截图（左侧UFUN,右侧Grip程序）：..._uf调用grip

Android RatingBar的基本使用和自定义样式，kotlin中文教程_ratingbar样式修改-程序员宅基地

文章浏览阅读156次。第一个：原生普通样式（随着主题不同，样式会变）第二个：原生普通样式-小icon第三个：自定义RatingBar 颜色第四个：自定义RatingBar DrawableRatingBar 各样式实现===============原生样式原生样式其实没什么好说的，使用系统提供的style 即可<RatingBarstyle="?android:attr/ratingBarStyleIndicator"android:layout_width=“wrap_cont.._ratingbar样式修改

OpenGL环境搭建：vs2017+glfw3.2.1+glad4.5_vs2017的opengl环境搭建(完整篇)-程序员宅基地

文章浏览阅读4.6k次，点赞6次，收藏11次。安装vs2017：参考vs2017下载和安装。安装cmake3.12.3：cmake是一个工程文件生成工具。用户可以使用预定义好的cmake脚本，根据自己的选择（像是Visual Studio, Code::Blocks, Eclipse）生成不同IDE的工程文件。可以从它官方网站的下载页上获取。这里我选择的是Win32安装程序，如图所示：然后就是运行安装程序进行安装就行。配置glfw3...._vs2017的opengl环境搭建(完整篇)

在linux-4.19.78中使用UBIFS_ubifs warning-程序员宅基地

文章浏览阅读976次。MLC NAND，UBIFS_ubifs warning

随便推点

计算机系统内存储器介绍,计算机系统的两种存储器形式介绍-程序员宅基地

文章浏览阅读2.2k次。计算机系统的两种存储器形式介绍时间：2016-1-6计算机系统的存储器一般应包括两个部分;一个是包含在计算机主机中的主存储器,简称内存,它直接和运算器,控制器及输入输出设备联系,容量小,但存取速度快,一般只存放那些急需要处理的数据或正在运行的程序;另一个是包含在外设中的外存储器,简称外存,它间接和运算器,控制器联系,存取速度虽然慢,但存储容量大,是用来存放大量暂时还不用的数据和程序,一旦要用时,就..._计算机存储器系统采用的是主辅结构,主存速度快、容量相对较小,用于 1 分程序,外

西门子PLC的编程工具是什么？_西门子plc编程软件-程序员宅基地

文章浏览阅读5.6k次。1. STEP 7（Simatic Manager）：STEP 7或者Simatic Manager是西门子PLC编程最常用的软件开发环境。4. STEP 7 MicroWin：STEP 7 MicroWn是一款专门针对微型PLC（S7-200系列PLC）的编程软件，是Simatic Manager的简化版。如果需要与PLC系统配合使用，则需要与PLC编程工具进行配合使用。除了上述软件之外，西门子还提供了一些配套软件和工具，如PLC模拟器、硬件调试工具等，以帮助PLC编程人员快速地进行调试和测试。_西门子plc编程软件