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

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

news 2026/5/12 22:50:21

目录

  • 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

HarnessGate：专为AI Agent设计的纯消息网关，实现多平台无缝桥接

1. 项目概述&#xff1a;一个纯粹的AI Agent消息网关如果你正在构建一个需要对接多个聊天平台&#xff08;比如Telegram、Discord、Slack&#xff09;的AI助手或客服机器人&#xff0c;你很可能已经踩过这样的坑&#xff1a;市面上主流的机器人框架&#xff0c;比如Botpress、L…...

编程新知 2026/5/12 22:00:43

多目标粒子群混合储能优化配置【附算法】

✨ 长期致力于混合储能、优化配置、风光互补微电网、多目标粒子群算法、CRITIC-TOPSIS研究工作&#xff0c;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流&#xff0c;点击《获取方式》 &#xff08;1&#xff09;风光-负荷多场景…...

编程新知 2026/5/12 21:52:12

基于LLM的多智能体协作框架：从原理到实践构建自主开发团队

1. 项目概述与核心价值最近在开源社区里&#xff0c;一个名为zxkane/autonomous-dev-team的项目引起了我的注意。乍一看这个标题&#xff0c;你可能会联想到科幻电影里的全自动机器人编程&#xff0c;或者是一些过于理想化的“AI接管开发”的噱头。但在我花时间深入研究和实践之…...

编程新知 2026/5/12 21:22:28

告别桌面混乱！Ubuntu 16.04 多桌面+Terminator分屏，打造程序员高效工作流

Ubuntu 16.04多桌面与Terminator分屏&#xff1a;构建程序员的高效工作流 作为一名长期在Ubuntu环境下工作的开发者&#xff0c;我深刻体会到工作环境配置对效率的影响。桌面混乱、窗口堆叠、频繁切换不仅浪费时间&#xff0c;还会打断编程的"心流"状态。经过多次迭代…...

编程新知 2026/5/12 21:18:05

Windows内核级虚拟串口驱动com0com：构建无限虚拟COM端口对的终极解决方案

Windows内核级虚拟串口驱动com0com&#xff1a;构建无限虚拟COM端口对的终极解决方案 【免费下载链接】com0com Null-modem emulator - The virtual serial port driver for Windows. Brought to you by: vfrolov [Vyacheslav Frolov](http://sourceforge.net/u/vfrolov/profil…...

编程新知 2026/5/12 20:50:42

Google 2026 AI全家桶升级：企业管理员必须在48小时内完成的3项策略校准与2项合规备案

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Google 2026 AI全家桶升级全景图 2026年&#xff0c;Google正式发布新一代AI基础设施矩阵——“Project Aether”&#xff0c;标志着其AI全家桶从模块化协同迈向原生融合时代。核心升级聚焦于模型、工具…...

编程新知 2026/5/12 20:43:33

TinyTroupe：轻量级智能体协作范式与确定性AI工程实践

1. 项目概述&#xff1a;这不是另一个“小模型”&#xff0c;而是一套轻量级智能体协作范式你可能已经看过不少标题带“Tiny”“Mini”“Lite”的AI项目&#xff0c;它们大多是在说“把大模型压缩一下&#xff0c;跑在手机上”。但 Microsoft 的TinyTroupe完全不是这个路数——…...

编程新知 2026/5/12 20:01:04

为Claude Code配置Taotoken解决封号与Token不足困扰

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 为Claude Code配置Taotoken解决封号与Token不足困扰 应用场景类&#xff0c;针对频繁使用Claude Code作为编程助手但受限于官方限制…...

编程新知 2026/5/12 20:01:02

AI与建模仿真融合：数字孪生从静态镜像到智能决策的演进

1. 项目概述&#xff1a;当AI遇见建模仿真&#xff0c;数字孪生正在经历什么&#xff1f;最近几年&#xff0c;无论是工业制造、智慧城市还是医疗健康&#xff0c;但凡提到数字化转型&#xff0c;总绕不开“数字孪生”这个词。它就像一个在虚拟世界里为物理实体打造的“克隆体”…...

编程新知 2026/5/12 19:59:01

为OpenClaw智能体工作流配置Taotoken作为统一的模型调用后端

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 为OpenClaw智能体工作流配置Taotoken作为统一的模型调用后端 对于使用OpenClaw框架构建AI智能体的开发者而言&#xff0c;一个稳定…...

编程新知 2026/5/12 19:41:07