JavaScript 設定CSS與注意事項

隨手發表於2018-03-18
JavaScriptCSS

JavaScript設定CSS的幾種方法及注意事項

JS設定CSS樣式

  • 直設定內聯style屬性

    el.style.color = `red`;
el.style[`font-size`] = `16px`;
el.style.fontSize = `16px`;

  • cssText設定內聯樣式

    el.style.cssText = `color: red`; //替換內聯css
el.style.cssText += `color: red` //追加

  • setProperty設定內聯樣式

    el.style.setProperty(`color`, `red`, `!important`); //第三個引數可 以省略

以上3中方法都是基於內聯樣式，用他們來獲取Dom元素的樣式是同樣只能獲取到內聯樣式。

  • addRule、insertRule
    二者區別 ,addRule：在原有css規則中加入樣式; insertRule:

       document.styleSheets[0].addRule(`.class`, `color: red`);
   document.styleSheets[0].insertRule(`.class{color: red}`, 0);  //引數：rules，index（cssRules 陣列中的位置）

注意事項

先看下面這段程式碼：預期執行結果是第三行不有出現過度效果，但實際還是上出現了過度效果

let con = document.getElementsByClassName(`container`)[0];
con.style.transitionDuration = `0s`;
con.style.transform = `translateX(0)`;
con.style.transitionDuration = `.2s`;
這是來自輪播圖功能中的程式碼段，目的是為了從最後一張圖跳到第一張圖時不顯示過渡動畫。
為了找到是什麼原因接下來打上debuger看看除錯的情況：
function prev(offsetWidth) {
        if(con.style.transform == maxWidth){
            // 開始
            debugger;     
            con.style.transitionDuration = `0s`;
            // 執行到此處：樣式transition-during沒有被渲染到DOM上
            con.style.transform = `translateX(0)`;
            // 執行到此處：樣式transition-during、translateX都沒有被渲染到DOM上
            initWidth = -600;
            offsetWidth = initWidth;
            con.style.transitionDuration = `.2s`;
            // 執行到此處：樣式transition-during、translateX都沒有被渲染到DOM上
        }
        setTimeout(function () {
            // 執行到此處：樣式transition-during、translateX都沒有被渲染到DOM上，且transition-during：.2s
            con.style.transform = `translateX(`+offsetWidth+`px)`;
        },2);
    }

原來瀏覽器為了優化會將css操作當一起執行相同的元素上屬性的樣式會被覆蓋，也就是上面這個例子中con.style.transitionDuration = `0s`;這句被覆蓋了，但是如果你在這句之後將加上一句console.log(con.style.transitionDuration)是可以獲取到0s的，所以只是瀏覽器沒有渲染出來而已，並不是沒有執行。
為了處理這個現象可以給這句加上延遲 
    setTimeout(function () {
            con.style.transitionDuration = `.2s`;
        },1)

完整例子程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #carousel{
            width: 600px;
            height: 400px;
            margin: 100px auto;
            overflow: hidden;
        }
        .container{
            transition-duration: .2s;
        }
        .container{
            transform: translateX(-600px);
        }
        .container>div{
            width: 600px;
            height: 400px;
            vertical-align: middle;
            text-align: center;
            border: 1px solid blue;
            box-sizing: border-box;
            line-height: 398px;
            font-size: 32px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="carousel">
        <div class="container">
            <!--第一張為了過度-->
            <div>5</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
</body>
<script>
    let carousel = document.getElementById(`carousel`);
    let imgWidth = carousel.offsetWidth;
    let conWidth = imgWidth * 6 + `px`;     //總寬度
    let con = document.getElementsByClassName(`container`)[0];
    let initWidth = -600;   //初始位置
    let maxWidth = `translateX(`+initWidth*5+`px)`;
    con.style.width = conWidth;
    function prev(offsetWidth) {
        if(con.style.transform == maxWidth){
            // debugger;
            con.style.transitionDuration = `0s`;
            con.style.transform = `translateX(0)`;
            initWidth = -600;
            offsetWidth = initWidth;
            // con.style.transitionDuration = `.2s`;
            setTimeout(function () {
                con.style.transitionDuration = `.2s`;
            },1)
        }
        setTimeout(function () {
            con.style.transform = `translateX(`+offsetWidth+`px)`;
        },2);
    }

    let play = setInterval(function () {
        initWidth -=600;
        prev(initWidth);
    },1000);
</script>
</html>

相關文章