css变量的声明和读取
1、css变量的声明
使用--声明变量($被sass用掉了,@被less用掉了)
<style> :root { --color: red; } </style>
root为根元素,相当于给html设置了css变量
/* :root 相当于 html */ html { --color: red; }
2、变量的读取
通过val函数读取
div { color: var(--color); }
val函数第二个参数,可选值,当变量不存在时读取第二个值
3、变量的类型
①当变量的类型为字符串时,可以与其他字符串拼接
div::after { --text1: 'hello '; --text2: var(--text1) 'world'; content: var(--text2, '萨瓦迪卡') '!' }
②当变量的类型为数字时,不能和单位直接拼接,需要用calc函数拼接
div { color: var(--color, blue); --width: 50; width: calc(var(--width) * 1px); background-color: red; }
4、变量的作用域
变量的作用域就是它所在选择器的范围
当作用域内有多个同名变量,按优先级最高的生效,同样式生效的规则一致
全局的变量通常放在根元素:root
里面,这样任何选择器都可以读取
5、响应式布局
<style> body { --primary: blue; --secondary: blue; } a { color: var(--primary); text-decoration-color: var(--secondary); } @media screen and (min-width: 350px) { body { --primary: red; --secondary: red; } } </style> </head> <body> <a href="">链接1</a> <a href="">链接2</a> </body>
6、兼容性处理
div{ color: red; color: val(--color); }
7、内联重新赋值css变量
通过getComputedStyle(document.documentElement).getPropertyValue('--c-999')可以获取到html标签中定义的--c-999变量
①此时div的颜色为#999
②style属性中可以重新定义--c-999的颜色
8、js操作
①通过setProperty设置css变量
②通过removeProperty删除css变量
③写一段在css中无用但在js中可以读取的代码
<style> :root { --foo: if(x > 5) this.width = 10; } </style> </head> <body> <script> const res = getComputedStyle(document.documentElement).getPropertyValue('--foo') console.log(res.trim()) // if(x > 5) this.width = 10 </script> </body>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个适用于 .NET 的开源整洁架构项目模板
· API 风格选对了,文档写好了,项目就成功了一半!
· 【开源】C#上位机必备高效数据转换助手
· .NET 9.0 使用 Vulkan API 编写跨平台图形应用
· MyBatis中的 10 个宝藏技巧!