运用CSS变量
使用方法
正确的用法
:root{
--JC_Color:"#ff0"; /*定义变量*/
--JC_Img_Url:"url(https://taobao.com/jc.png)";/*定义背景图片*/
--JC_TRS:"translateY(0)";/*定义CSS3变换*/
}
.elmA{
color:var(--JC_Color);/*使用变量*/
background-image:var(--JC_Img_Url)/*使用背景图片变量*/
transform:var(--JC_TRS);/*使用CSS3变换*/
}
容易犯错的用法
下面的用法是错误的：
:root{
--JC_Img_Url:"https://taobao.com/jc.png";/*定义背景图片*/
--JC_TRS:"0";/*定义CSS3变换*/
}
.elmA{
background-image:url(var(--JC_Img_Url))/*使用背景图片变量*/
transform:translateY(var(--JC_TRS));/*使用CSS3变换*/
}
Javascript设置CSS变量
documentElement.style.setProperty("--JC_Img_Url","url(https://taobao.com/jc.png)")
Javascript获取CSS变量
documentElement.style.getPropertyValue("--JC_Img_Url")
其他
作用域
CSS变量是存在作用域的，作用域是针对DOM节点的。
.elmA{
--JC_Color:"#f11";
}
/*在非 .elmA 节点下的DOM节点无法获取变量 --JC_Color 的值*/
:root{
color:var(--JC_Color); /*失效值*/
}
可覆盖
:root{
--JC_Color:"#f00";
}
body .elmA{
--JC_Color:"#f11";
}
/*
* JS 设置
*/
document.querySellector('.elmA').style.setProperty("--JC_Color","#f12")
/*
*会使用在当前节点定义的值
*这意味着可以设置默认值了
**/
.elmA{
color:var(--JC_Color); /*#f12*/
}
一个简单的封装
class CssVar {
/**
* 针对某一Dom节点的某个CSS变量值进行设置
* 包括了获取、设置和删除
* next：可以针对背景图片、transform等进行再次封装，让其使用更简单
* @param {Object} param0 配置
*/
constructor({elm,name,value}){
this.name = `--${name}`
this._elm = elm || document.documentElement
this.set(value)
}
set(value){
this._elm.style.setProperty(this.name,value)
}
get(){
return this._elm.style.getPropertyValue(this.name).trim()
}
selfDestruction(){
this._elm.style.removeProperty(this.name)
}
}
一个简单的Demo
list 插入动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
:root{
--Item_TranslateY: translateY(100%);
--Item_Opacity: 0;
}
.list{
overflow:hidden;
position: relative;
}
.item{
transition: all 1s;
opacity: var(--Item_Opacity);
transform: var(--Item_TranslateY)
}
</style>
</head>
<body style="height:100%;padding:0;margin:0">
<button id="inputLi">插入</button>
<ul class="list" id="list"></ul>
<script>
class CssVar {
/**
* 针对某一Dom节点的某个CSS变量值进行设置
* 包括了获取、设置和删除
* next：可以针对背景图片、transform等进行再次封装，让其使用更简单
* @param {Object} param0 配置
*/
constructor({elm,name,value}){
this.name = `--${name}`
this._elm = elm || document.documentElement
this.set(value)
}
set(value){
this._elm.style.setProperty(this.name,value)
}
get(){
return this._elm.style.getPropertyValue(this.name).trim()
}
selfDestruction(){
this._elm.style.removeProperty(this.name)
}
}
</script>
<script>
function insertItem(){
let id = (+new Date).toString(32)
let html = `<li class="item" id="${id}">我是列表</li>`
window.list.innerHTML += html
let item = window[id]
// 触发动画
setTimeout(v=>{
new CssVar({
elm:item,
name:"Item_TranslateY",
value:0
})
new CssVar({
elm:item,
name:"Item_Opacity",
value:1
})
},50)
}
window.inputLi.onclick = function(){
insertItem()
}
</script>
</body>
</html>