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

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

news 2025/10/13 9:37:57

目录

  • 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

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2025/10/11 18:37:56

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/10/8 22:39:15

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/9/29 7:50:54

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/10/11 14:42:26

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/9/22 18:49:24

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/8/26 21:58:04

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/10/3 14:20:09