当前位置： 首页 > news >正文

CSS变量 -- var() 使用教程

news 2025/7/8 7:55:12

目录

  • 1 CSS变量的基本使用
    • 1.1 变量定义
    • 1.1 变量使用
    • 1.3 全局/局部变量
  • 2 CSS变量的参数
  • 3 CSS变量的拼接和计算
    • 3.1 拼接
    • 3.2 计算
  • 4 JS 修改 CSS变量

CSS 自定义属性（有时候也被称作CSS 变量或者级联变量），它的值可以在整个文档中重复使用。

复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。

1 CSS变量的基本使用

1.1 变量定义

CSS 变量名前面要加两根连词线 –

--color: #E6E6FA;
--height: 100px;

1.1 变量使用

由 var() 函数来获取值，比如：

background-color: var(--color);
height: var(--height);

CSS 变量名不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合

1.3 全局/局部变量

  • 全局变量

:root
:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素
在里面声明的变量，下面的所有选择器都可以拿到
注：与 scope 冲突

:root {--color: #E6E6FA;--height: 100px;
}.header-container {background-color: var(--color);height: calc(var(--height) * 1.5);
}
  • 局部变量
.header-container {--color: #E6E6FA;--height: 100px;background-color: var(--color);height: calc(var(--height) * 1.5);
}

2 CSS变量的参数

var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

color: var(--foo, #7F583F);

3 CSS变量的拼接和计算

如果变量值是一个字符串，可以与其他字符串拼接；
如果变量值是数值，可以进行计算;

3.1 拼接

// 字符串
--bar: 'hello';   
--foo: var(--bar)' world';

3.2 计算

:root {--height: 100px;
}.header-container {height: calc(var(--height) * 1.5);
}

4 JS 修改 CSS变量

在开发过程中，有时候我们需要根据不同的条件来动态修改样式，这时候就需要使用JavaScript来实现。
具体来说，我们可以通过 JavaScript 访问元素的 documentElement.style 属性，然后使用 setProperty 方法来更改 CSS 变量的值

<button @click="changeHeight">Change Height</button>

<script setup>
const changeHeight = () => {document.documentElement.style.setProperty('--height', '200px');
}
</script>

<style>
:root {--height: 100px;
}.header-container {height: var(--height);
}
</style>

相关文章：

CSS变量 -- var() 使用教程

目录 1 CSS变量的基本使用1.1 变量定义1.1 变量使用1.3 全局/局部变量 2 CSS变量的参数3 CSS变量的拼接和计算3.1 拼接3.2 计算 4 JS 修改 CSS变量 CSS 自定义属性&#xff08;有时候也被称作CSS 变量或者级联变量&#xff09;&#xff0c;它的值可以在整个文档中重复使用。 复…...

编程日记 2024/5/30 18:55:23

python基础-数据结构-leetcode刷题必看-queue---队列-python的底层构建

文章目录 队列双端队列 deque底层存储deque接口1. __init__(self, iterable: Iterable[_T], maxlen: int | None None) -> None2. append(self, __x: _T) -> None3. appendleft(self, __x: _T) -> None4. copy(self) -> Self5. count(self, __x: _T) -> int6. …...

编程日记 2024/5/30 18:52:19

深入理解Spring Security：保护你的Web应用程序

深入理解Spring Security：保护你的Web应用程序 这听起来像是一部詹姆斯邦德电影，邦德试图进入坏家伙的藏身之处。坏家伙设置了一系列超级安全措施，有多层次的安全防御。邦德克服了其中一层，进入了隐藏处，但又遇到了下一个陷阱。他战胜了一个又一个陷阱，最终克服了所有障…...

编程日记 2024/5/30 18:51:17

【车载开发系列】Vector工具链的安装

【车载开发系列】Vector工具链的安装 【车载开发系列】Vector工具链的安装 【车载开发系列】Vector工具链的安装一. VectorDriver二. DaVinci_Developer三. DaVinci Configurator 一. VectorDriver Vector Driver Setup是Vector产品链中重要的驱动软件,所有的硬件设备进行连接…...

编程日记 2024/5/30 18:49:14

Windows系统部署YOLOv5 v6.1版本的训练与推理环境保姆级教程

文章目录 一 概述二 依赖环境(prerequisites)2.1 硬件环境2.2 软件环境 三 环境安装3.1 创建并激活虚拟环境3.2 安装Pytorch与torchvision3.3 校验Pytorch安装3.4 下载 YOLOv5 v6.1 源码3.5 安装 YOLOv5 依赖3.6 下载预训练模型3.7 安装其他依赖3.8 测试环境安装3.9 测试训练流…...

编程日记 2024/5/30 18:47:12

[RK3588-Android12] 关于EDP屏外设为Panel，不支持HPD的配置

问题描述 直接附上dts配置&#xff0c;也可自行查看先关文档RKDocs\common\display\Rockchip_RK3588_User_Guide_eDP_CN.pdf 解决方案&#xff1a; // EDP屏参数panel-edp {compatible "simple-panel";// 屏en脚 自行根据原理图配置enable-gpios <&gpioX R…...

编程日记 2024/5/30 18:46:10

142.栈和队列：用栈实现队列（力扣）

题目描述 代码解决 class MyQueue { public:stack<int> stIn; // 输入栈&#xff0c;用于push操作stack<int> stOut; // 输出栈&#xff0c;用于pop和peek操作MyQueue() {}void push(int x) {stIn.push(x); // 将元素压入输入栈}int pop() {// 如果输出栈为空&…...

编程日记 2024/5/30 18:44:06

乡村振兴的乡村产业创新发展：培育乡村新兴产业，打造乡村产业新名片，促进乡村经济多元化发展

目录 一、引言 二、乡村产业创新发展的必要性 &#xff08;一&#xff09;适应新时代发展要求 &#xff08;二&#xff09;满足消费升级需求 &#xff08;三&#xff09;促进农民增收致富 三、培育乡村新兴产业策略 &#xff08;一&#xff09;加强科技创新引领 &#…...

编程日记 2024/5/30 18:43:05

数据库|基于T-SQL创建数据库

哈喽&#xff0c;你好啊&#xff0c;我是雷工&#xff01; SQL Server用于操作数据库的编程语言为Transaction-SQL,简称T-SQL。 本节学习基于T-SQL创建数据库。以下为学习笔记。 01 打开新建查询 首先连接上数据库&#xff0c;点击【新建查询】打开新建查询窗口&#xff0c; …...

编程日记 2024/5/30 18:38:58

智能家居ZigBee网关选型定制指南：主控，操作系统，天线设计，助力IoT开发者

随着科技的发展和人们生活水平的提高&#xff0c;智能家居以其便捷、舒适、安全等特点&#xff0c;逐渐走进千家万户&#xff0c;成为家装消费品换新升级的重要方向。在智能家居系统中&#xff0c;网关扮演着中枢控制器的角色&#xff0c;负责将各种设备连接到互联网上&#xf…...

编程日记 2024/5/30 18:37:55

QT截图程序，可多屏幕截图二，增加调整截图区域功能

上一篇QT截图程序&#xff0c;可多屏幕截图只是实现了最基本的截图功能&#xff0c;虽然能用但是缺点也有&#xff0c;没办法更改选中的区域&#xff0c;这在实际使用时不太方便。这篇增加了这个功能。先看看效果。 实现代码为&#xff1a; 头文件 #ifndef MASKWIDGET_H #de…...

编程日记 2024/5/30 18:35:52

开源浪潮与闭源堡垒：大模型未来的双重奏

从数据隐私、商业应用和社区参与等方面来看&#xff0c;开源大模型和闭源大模型各有优劣势。开源模型在透明度、社区协作和成本效益方面具有优势&#xff0c;而闭源模型在安全性、合规性和商业竞争力方面表现出色。因此&#xff0c;我更倾向于认为&#xff0c;未来的大模型发展…...

编程日记 2024/5/30 18:33:50

postman教程-6-发送delete请求

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节我们学习了postman发送put请求的方法&#xff0c;本小节我们讲解一下postman发送delete请求的方法。 HTTP DELETE 请求是一种用于删除指定资源的请求方法。在RESTful API 设计中&#xff0c;DELETE 请求…...

编程日记 2024/5/30 18:32:47

java小技能： 数字和字母组合的验证码图片(生成验证码字符并加上噪点，干扰线)

文章目录 引言I 验证码的作用1.1 验证使用计算机的是一个人，而非计算机程序。1.2 提供一个很短的时间窗的一次性密码。II 数字和字母组合的验证码图片2.1 获取验证码图片2.2 生成验证码字符并加上噪点，干扰线see also引言 世界上没有绝对的信息安全，但是有防范得好和坏的分…...

编程日记 2024/5/30 18:31:45

网络故障与排除

一、Router-ID冲突导致OSPF路由环路 路由器收到相同Router-ID的两台设备发送的LSA&#xff0c;所以查看路由表看到的OSPF缺省路由信息就会不断变动。而当C1的缺省路由从C2中学到&#xff0c;C2的缺省路由又从C1中学到时&#xff0c;就形成了路由环路&#xff0c;因此出现路由不…...

编程日记 2024/5/30 18:30:42

Cocos Creator 编辑器的数据绑定详解

Cocos Creator 是一款由 Cocos 平台推出的游戏开发工具&#xff0c;它集成了图形化编辑器、脚本引擎和资源管理器等功能&#xff0c;方便开发者快速地创建游戏。其中&#xff0c;数据绑定是 Cocos Creator 编辑器中非常重要的一个功能&#xff0c;它可以帮助开发者实现页面元素…...

编程日记 2024/5/30 18:27:40

解决Selenium NameError: name ‘By’ is not defined

解决Selenium NameError: name ‘By’ is not defined 文章目录 解决Selenium NameError: name By is not defined背景错误原因解决方法1. 检查导入语句2. 修正拼写和大小写3. 验证Selenium库安装4. 重启IDE或终端5. 检查环境变量 验证总结 背景 在使用Selenium进行Web自动化测…...

编程日记 2024/5/30 18:20:28

创建特定结构的二维数组：技巧与示例

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言&#xff1a;二维数组的奇妙世界 二、方法一&#xff1a;直接初始化 1. 初始化一个…...

编程日记 2024/5/30 18:19:27

React Native 之 BackHandler （二十）

react-native 中的 BackHandler 是一个用于处理 Android 设备上的硬件返回按钮&#xff08;back button&#xff09;和 iOS 设备上的手势返回&#xff08;swipe back gesture&#xff09;的模块。在 React Native 应用中&#xff0c;当用户按下返回按钮或执行返回手势时&#x…...

编程日记 2024/5/30 18:17:25

一篇文章讲透排序算法之快速排序

前言 本篇博客难度较高&#xff0c;建议在学习过程中先阅读一遍思路、浏览一遍动图&#xff0c;之后研究代码&#xff0c;之后仔细体会思路、体会动图。之后再自己进行实现。 一.快排介绍与思想 快速排序相当于一个对冒泡排序的优化&#xff0c;其大体思路是先在文中选取一个…...

编程日记 2024/5/30 18:16:24

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

编程新知 2025/7/7 7:44:21

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/7/6 22:38:45

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/6/21 18:22:13

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/7/6 9:01:35

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2025/7/6 14:53:36

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2025/7/6 0:31:20

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/7/6 3:16:52

客户案例 | 短视频点播企业海外视频加速与成本优化：MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战 某短视频点播企业深耕国内用户市场&#xff0c;但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大&#xff0c;传统架构已较难满足当前企业发展的需求&#xff0c;企业面临着三重挑战&#xff1a; ① 业务&#xff1a;国内用户访问海外服…...

编程新知 2025/7/7 22:52:22

中科院1区顶刊|IF14+：多组学MR联合单细胞时空分析，锁定心血管代谢疾病的免疫治疗新靶点

中科院1区顶刊|IF14&#xff1a;多组学MR联合单细胞时空分析&#xff0c;锁定心血管代谢疾病的免疫治疗新靶点 当下&#xff0c;免疫与代谢性疾病的关联研究已成为生命科学领域的前沿热点。随着研究的深入&#xff0c;我们愈发清晰地认识到免疫系统与代谢系统之间存在着极为复…...

编程新知 2025/7/7 5:04:53

大模型智能体核心技术：CoT与ReAct深度解析

**导读&#xff1a;**在当今AI技术快速发展的背景下&#xff0c;大模型的推理能力和可解释性成为业界关注的焦点。本文深入解析了两项核心技术&#xff1a;CoT&#xff08;思维链&#xff09;和ReAct&#xff08;推理与行动&#xff09;&#xff0c;这两种方法正在重新定义大模…...

编程新知 2025/6/19 6:12:54