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

目录

  • 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> 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/19152.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【TypeScript】ts中的Classes使用方法介绍

简言 TypeScript 完全支持 ES2015 中引入的类关键字。 与 JavaScript 语言的其他功能一样&#xff0c;TypeScript 添加了类型注解和其他语法&#xff0c;允许您表达类与其他类型之间的关系。 class类是一个较重要的知识。 Classes 类声明 ts中类的声明和js中的高度相似。 类…

MVC和Filter

目录 MVC和三层架构模型的联系 Filter 概念 作用 应用场景 步骤 简单入门 MVC和三层架构模型的联系 m-->model即模型是三层架构模型的业务层&#xff08;service&#xff09;和持久层(dao) v-->views即视图是三层架构模型的表现层(web) c-->controller即控制器也…

出现 java: Annotation processing is not supported for module cycles 解决方法

目录 前言1. 问题所示2. 原理分析3. 解决方法前言 对于循环依赖的问题,代码中遇到过两次,分别如下: 深度剖析Spring循环依赖(实战Bug)出现The dependencies of some of the beans in the application context form a cycle 解决方法(全)对于模块的依赖第一次遇到,如文…

【SpringMVC】_SpringMVC项目返回HTML与JSON

目录 1. SpringMVC项目返回HTML页面 2. SpringMVC项目返回JSON 2.1 程序演示 2.2 关于响应的Content-Type 2.2.1 接口为对象 2.2.2 接口为String 2.2.3 接口为Map 本专栏已介绍&#xff1a; 返回静态页面&#xff1a; 【Spring MVC】_SpringMVC项目返回静态页面_mvc 返…

一种基于高德Web API实现沿路画面的实现

概述 本文在mapboxGL框架下&#xff0c;分享一种基于高德Web API实现沿路画面的实现。 实现效果 实现 1. 实现思路 通过点击获取路径的起点和终点&#xff1b;将多次规划路径的结果连成一条线&#xff1b;当鼠标点击回到第一个点的时候结束绘制&#xff1b;绘制结束后将路径…

写代码之前一定要提前想好思路

就和写数学题目一样&#xff0c;在做题目之前要先把思路确立下来。可能是我早年做数学的时候老是着急做题目没怎么分析过题目&#xff0c;把这个习惯不自觉地代入了代码的写入当中。习惯的养成使得我即使明白了自己的问题也依然会不断的犯错&#xff0c;看来只有刻意地提醒自己…

Flutter 中的 Viewport 小部件:全面指南

Flutter 中的 Viewport 小部件&#xff1a;全面指南 Flutter 是一个现代的移动和 web 应用开发框架&#xff0c;它允许开发者以一种非常直观和高效的方式构建用户界面。在 Flutter 中&#xff0c;Viewport 是一个非常重要的小部件&#xff0c;它提供了一个滚动视口&#xff0c…

【MATLAB源码-第217期】基于matlab的16QAM系统相位偏移估计HOS算法仿真,对比补偿前后的星座图误码率。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 高阶统计量&#xff08;HOS&#xff09;频偏估计算法 高阶统计量&#xff08;Higher Order Statistics, HOS&#xff09;频偏估计算法是一种先进的信号处理技术&#xff0c;广泛应用于现代数字通信系统中&#xff0c;以应对…

【Nginx】深入解析Nginx配置文件

Nginx&#xff08;发音为“engine-ex”&#xff09;是一个高性能的HTTP和反向代理服务器&#xff0c;也是一个IMAP/POP3/SMTP代理服务器。由于其高并发性、低资源消耗和模块化设计&#xff0c;Nginx在全球范围内被广泛使用。本文将深入解析Nginx配置文件&#xff0c;帮助读者了…

如何快速申请免费单域名SSL证书

申请免费的单域名SSL证书通常涉及以下几个步骤&#xff0c;虽然具体细节可能会根据不同的证书颁发机构(CA)有所差异。以下是通用的申请流程&#xff1a; 1.选择证书颁发机构&#xff1a; 访问提供免费单域名SSL证书的证书颁发机构网站&#xff0c;例如JoySSL等。 2.注册账号…

全局配置-案例:配置tabBar

一、需求&#xff1a;实现如图所示的tabBar效果 二、实现步骤&#xff1a; 1.拷贝图标资源 把image文件夹拷贝到小程序项目根目录中 图片中包含-active的是选中之后的图标 图片中不包含-active的是默认图标 2.新建3个对应的tab页面 3.配置tabBar选项 &#xff08;1&#xf…

oracle tree

select * from "Test"; INSERT INTO "Test" ("id", "name", "pid") VALUES (01, 中国, 00); INSERT INTO "Test" ("id", "name", "pid") VALUES (01.01, 福建, 01); INSERT INTO…

【MySQL】——数据库设计概述与需求分析

&#x1f4bb;博主现有专栏&#xff1a; C51单片机&#xff08;STC89C516&#xff09;&#xff0c;c语言&#xff0c;c&#xff0c;离散数学&#xff0c;算法设计与分析&#xff0c;数据结构&#xff0c;Python&#xff0c;Java基础&#xff0c;MySQL&#xff0c;linux&#xf…

如何找出真正的交易信号?Anzo Capital昂首资本总结7个

匕首是一种新兴的价格走势形态&#xff0c;虽然不常见&#xff0c;但具有较高的统计可靠性。它通常预示着趋势的持续发展。该模式涉及到同时参考两个不同的时间周期进行交易&#xff0c;一个是短期&#xff0c;另一个是长期&#xff0c;比如一周时间框架与一天时间框架、一天时…

看完这篇抖音小店选品秘籍!难道还愁不会选品吗?

大家好&#xff0c;我是喷火龙。 做抖音小店&#xff0c;没有什么花里胡哨的东西&#xff0c;核心就是我们的产品&#xff0c;把大部分精力用到选品上肯定是没错的。 选品之前一定要做好店铺的定位&#xff0c;确定好自己的主营类目&#xff0c;主营类目至少要占店铺产品的70…

Android--AOSP中使用AlertDialog使用踩坑记录

在App中使用AlertDialog有很多帖子说明&#xff0c;这里不在赘述。主要记录修改AOSP中遇到的使用AlertDialog踩坑记录。 在fwk中的service或者是CarService中要使用AlertDialog&#xff0c;仅添加AlertDialog是不够的&#xff0c;会直接crash。 android.view.WindowManager$B…

J.搬砖【蓝桥杯】/01背包+贪心

搬砖 01背包贪心 思路&#xff1a;要让重量更小的在更前面&#xff0c;价值更大的在更后面&#xff0c;vi−wj>vj−wi viwi>vjwj 第 i 个箱子放在第 j 个箱子下面就显然更优。所以进行排序再用01背包即可。 #include<iostream> #include<algorithm> #defi…

go语言的使用方法

一.go语言的介绍 1.简介 2.应用领域 3.使用go语言的公司 4.go语言开发工具介绍 5.go语言开发环境搭建 【1】搭建Go开发环境-安装和配置SDK 基本介绍: 1).SDK的全称(Software Development Kit软件开发工具包&#xff09;2).SDK是提供给开发人员使用的&#xff0c;其中包含了…

SAP 消息号VF501科目确定期间出错

在销售开票VF02的时候&#xff0c;经常出现报错&#xff1a;“科目确定期间出错”&#xff0c;这个报错&#xff0c;目前检查步骤&#xff1a; 1、BP客户主数据&#xff0c;销售代码层数据&#xff08;销售与分销&#xff09;-开票-会计-客户科目分配组&#xff0c;要与销售订…

【UML用户指南】-02-UML的14种图

1、结构图 1、类图&#xff08;class diagram&#xff09; 展现了一组类、接口、协作和它们之间的关系。 在面向对象系统的建模中所建立的最常见的图就是类图。类图给出系统的静态设计视图。 包含主动类的类图给出系统的静态进程视图。构件图是类图的变体。 2、对象图&a…