JavaScript 設置CSS與注意事項

vincent_xyb 發布于2019-08-30 14:10 / 2590人閱讀

摘要：設置的幾種方法及注意事項設置樣式直設置內聯屬性設置內聯樣式替換內聯追加設置內聯樣式第三個參數可以省略以上中方法都是基于內聯樣式，用他們來獲取元素的樣式是同樣只能獲取到內聯樣式。

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)

完整例子代碼:

GPU云服務器云服務器 javascript設置css 安全設置注意 javascript+css html css javascript

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115827.html

JavaScript 設置CSS與注意事項

摘要：設置的幾種方法及注意事項設置樣式直設置內聯屬性設置內聯樣式替換內聯追加設置內聯樣式第三個參數可以省略以上中方法都是基于內聯樣式，用他們來獲取元素的樣式是同樣只能獲取到內聯樣式。 JavaScript設置CSS的幾種方法及注意事項 JS設置CSS樣式直設置內聯style屬性 el.style.color = red; el.style[font-size] = 16px; el.s...

Jokcy 2019-08-22 15:30 評論0 收藏0
JQuery基礎修煉-樣式篇

摘要：具有相同的父元素，并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素。可見元素的寬度或高度，是大于零。元素的或被認為是可見的，因為他們仍然占用空間布局。 jQuery對象轉化成DOM對象 ? ? jQuery庫本質上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理，為了是提供更好更方便快捷的DOM處理與開發常見中經常使用的功能。我們可以用jQuery...

_Dreams 2019-08-02 15:55 評論0 收藏0
JQuery基礎修煉-樣式篇

摘要：具有相同的父元素，并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素。可見元素的寬度或高度，是大于零。元素的或被認為是可見的，因為他們仍然占用空間布局。 jQuery對象轉化成DOM對象 ? ? jQuery庫本質上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理，為了是提供更好更方便快捷的DOM處理與開發常見中經常使用的功能。我們可以用jQuery...

luck 2019-08-19 18:24 評論0 收藏0
這么多前端優化點你都記得住嗎？

摘要：不推薦移動端瀏覽器前端優化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點設備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優化策略進行羅列注意，是羅列不是展開，遇到不會不懂的點還請站外擴展開車...

ysl_unh 2019-08-21 17:30 評論0 收藏0
這么多前端優化點你都記得住嗎？

摘要：不推薦移動端瀏覽器前端優化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點設備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優化策略進行羅列注意，是羅列不是展開，遇到不會不懂的點還請站外擴展開車...

Tecode 2019-08-01 17:58 評論0 收藏0