【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

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

智能推荐

ffmpeg音视频处理流程核心技术_视频效果演示系统的核心技术-程序员宅基地

文章浏览阅读712次。视频播放器原理什么是ffmpeg? ffmpeg 音视频编/解码流程图 ffmpeg 常用 struct AVFormatContext AVStream AVCodecContext AVCodec AVPacket AVFrame ffmpeg 常用Api av_register_all() avformat_alloc_output_context2() avio_open()..._视频效果演示系统的核心技术

Java List集合多种情况处理方法_java list reduce-程序员宅基地

文章浏览阅读449次。Java List集合多种情况处理方法：List集合交集、并集、差集、去重、与数组互转、删除、排序等操作_java list reduce

【UML】软件需求说明书_uml需求文档访客管家-程序员宅基地

文章浏览阅读2.3k次，点赞77次，收藏80次。需求：指人对客观事务需要的表现，体现为愿望、意向和兴趣，因而成为行动的一种直接原因。软件需求（IEEE软件工程标准词汇表）：（1）用户解决问题或达到目标所需的条件或能力。（2）系统或系统部件要满足合同、标准、规范或者其他正式规定文档所需具有条件或能力。（3）对（1）或（2）中的一个条件或一种能力的一种文档化表述。用例：定义 1 用例是对一个活动者使用一个系统的一项功能时进行交互过程中的一个文字描述序列。_uml需求文档访客管家

linux笔记-根文件系统及文件管理命令详解_根文件系统文本登陆-程序员宅基地

文章浏览阅读574次。第三章、Linux根文件系统及文件管理命令详解02_03_Linux根文件系统详解文件系统：rootfs: 根文件系统 FHS：Filesystem Hierarchy Standard（文件系统目录标准）的缩写，多数Linux版本采用这种文件组织形式，类似于Windows操作系统中c盘的文件目录，FHS采用树形结构组织文件。FHS定_根文件系统文本登陆

马克 · 扎克伯格期望的元宇宙到底会是什么样子？_马克扎克伯格博客-程序员宅基地

文章浏览阅读358次。马克 · 扎克伯格期望的元宇宙到底会是什么样子？_马克扎克伯格博客

使用Python开发游戏运行脚本（二）实现模拟点击_大漠窗口绑定成功按键-程序员宅基地

文章浏览阅读1.4w次，点赞8次，收藏78次。本文接上一篇文章使用Python开发游戏运行脚本（一）成功调用大漠插件上一篇我们已经简单实现了python调用大漠插件并输出版本号的功能，接下来我们要做的就是通过大漠插件模拟鼠标点击和键盘文字输入。由于近年来最热门的游戏基本都是手游，所以我们也会以手游为例来进行游戏脚本的开发。大漠插件是一款针对Windows平台的鼠标键盘模拟+图文查找库，这样我们要想实现手游脚本开发的第一步，就是下载Android模拟器，然后在对安卓模拟器进行鼠标和键盘的模拟，以此来实现自动化游戏脚本。一、Android模拟器的_大漠窗口绑定成功按键