5
【css变量】css自定义属性
source link: https://www.scarsu.com/css-variable/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
【css变量】css自定义属性
原生js控制css变量、Vue3响应式css变量
2020-09-25 | 10技术 | CSS | 340 字 | 1 分钟 | 阅读量 2881 条评论
CSS自定义属性、CSS变量、级联变量，可以文档中重复使用的样式变量
- 声明一个自定义属性，属性名需要以两个减号（–）开始
- 大小写敏感
- 属性值则可以是任何有效的CSS值。
- 和其他属性一样，自定义属性也是写在规则集之内的
例子🌰：
element {
--main-bg-color: brown;
}规则集所指定的选择器 定义了自定义属性的可见作用域
- 自定义属性具有继承性，受级联的约束，从其父级继承其值。
最佳实践💁♀️：根伪类
:root，相当于全局变量:root {
--main-bg-color: brown;
}
color: var(--main-color);
备用值 / 默认值
// 正确做法
var(--my-var, red)
var(--my-var, var(--my-background, pink))
// 错误做法
var(--my-var, --my-background, pink)
js更新变量
// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");
// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");
// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", newValue);
Vue3 响应式css变量
<template>
<div class="text">hello</div>
</template>
<script>
export default {
data() {
return {
color: 'red'
}
}
}
</script>
<style vars="{ color }">
.text {
color: var(--color);
}
</style>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK