多种CSS变量技术 带入进入老司机行业
2024-08-25 11:59:23
CSS 变量技术
具体用法
使用 -- 声明变量,使用 var() 函数获取变量。
:root{
--header-height: 70px;
} body {
--color: white;
} .header {
height: var(--header-height);
}
var() 函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。
color: var(--color);
与 calc 结合使用
height: calc(100vh - var(--header-height));
变量作用域
所在选择器优先级高的变量声明会覆盖优先级低的。
body {
--color: red;
} p {
--color: black;
}
<p>显示为黑色</p>
javascript 检测浏览器支持
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', );
javascript 操作css变量
读取变量的值:
const dom = document.querySelector('selector');
dom.style.getPropertyValue('--color');
修改css变量的值:
const dom = document.querySelector('selector');
dom.style.setProperty('--color', 'white');
最新文章
- node.js+socket.io配置详解
- C/C++的四大内存分区 分类: C/C++ 2015-05-09 01:36 163人阅读 评论(0) 收藏
- Linux c实现服务端与客户端聊天
- Java - 网络编程(NetWork)
- avalon.js 多级下拉框实现
- Delphi中获取某类的祖先类及其所在单元名称(使用GetTypeData(PClass.ClassInfo)函数,并且该类是从TPersistent类的派生类才可以这么使用)
- C++ 初始化列表(转)
- LeetCode(47)-Reverse Bits
- WiderG的博客皮肤
- 【原】Java学习笔记003 - 数据类型
- 【BZOJ4008】[HNOI2015]亚瑟王(动态规划)
- Windows 下运行Makefile文件
- xadmin增加用户 除了账号和密码 添加其他信息
- python 全栈开发,Day78(Django组件-forms组件)
- python测试开发django-34.xadmin管理后台
- Java各种排序算法
- makefile for opencv
- 应用程序正常初始化(0xc0000135)失败的解决方法
- JQuery元素控制方法汇总
- BZOJ3298: [USACO 2011Open]cow checkers(佐威夫博弈)
热门文章
- 自己动手写SQL执行引擎
- 一个Jmeter模拟上传文件接口的实例
- 仅当使用了列列表并且 IDENTITY_INSERT 为 ON 时,才能为表&#39;xxxx&#39;中的标识列指定显式值
- rollup环境搭建(es6转es5、压缩、本地服务器、热更新)
- [TopCoder]Seatfriends
- @bzoj - 2595@ 游览计划
- SpringCloud Alibaba (一):序言
- 手把手教你学Numpy,这些api不容错过
- gradle的搭建和配置
- Java8新特性之流stream