運用CSS變數

得得啊啊發表於2018-06-04
CSS變數

運用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>


相關文章