成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript 設(shè)置CSS與注意事項(xiàng)

Jokcy / 1216人閱讀

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

JavaScript設(shè)置CSS的幾種方法及注意事項(xiàng) JS設(shè)置CSS樣式

直設(shè)置內(nèi)聯(lián)style屬性

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

cssText設(shè)置內(nèi)聯(lián)樣式

el.style.cssText = "color: red"; //替換內(nèi)聯(lián)css
el.style.cssText += "color: red" //追加

setProperty設(shè)置內(nèi)聯(lián)樣式

el.style.setProperty("color", "red", "!important"); //第三個參數(shù)可 以省略

以上3中方法都是基于內(nèi)聯(lián)樣式，用他們來獲取Dom元素的樣式是同樣只能獲取到內(nèi)聯(lián)樣式。

addRule、insertRule
二者區(qū)別 ,addRule：在原有css規(guī)則中加入樣式; insertRule:

   document.styleSheets[0].addRule(".class", "color: red");
   document.styleSheets[0].insertRule(".class{color: red}", 0);  //參數(shù)：rules，index（cssRules 數(shù)組中的位置）

注意事項(xiàng)

先看下面這段代碼：預(yù)期執(zhí)行結(jié)果是第三行不有出現(xiàn)過度效果，但實(shí)際還是上出現(xiàn)了過度效果

let con = document.getElementsByClassName("container")[0];
con.style.transitionDuration = "0s";
con.style.transform = "translateX(0)";
con.style.transitionDuration = ".2s";
這是來自輪播圖功能中的代碼段，目的是為了從最后一張圖跳到第一張圖時不顯示過渡動畫。
為了找到是什么原因接下來打上debuger看看調(diào)試的情況：
function prev(offsetWidth) {
        if(con.style.transform == maxWidth){
            // 開始
            debugger;     
            con.style.transitionDuration = "0s";
            // 運(yùn)行到此處：樣式transition-during沒有被渲染到DOM上
            con.style.transform = "translateX(0)";
            // 運(yùn)行到此處：樣式transition-during、translateX都沒有被渲染到DOM上
            initWidth = -600;
            offsetWidth = initWidth;
            con.style.transitionDuration = ".2s";
            // 運(yùn)行到此處：樣式transition-during、translateX都沒有被渲染到DOM上
        }
        setTimeout(function () {
            // 運(yùn)行到此處：樣式transition-during、translateX都沒有被渲染到DOM上，且transition-during：.2s
            con.style.transform = "translateX("+offsetWidth+"px)";
        },2);
    }
原來瀏覽器為了優(yōu)化會將css操作當(dāng)一起執(zhí)行相同的元素上屬性的樣式會被覆蓋，也就是上面這個例子中con.style.transitionDuration = "0s";這句被覆蓋了，但是如果你在這句之后將加上一句console.log(con.style.transitionDuration)是可以獲取到0s的，所以只是瀏覽器沒有渲染出來而已，并不是沒有執(zhí)行。
為了處理這個現(xiàn)象可以給這句加上延遲 
    setTimeout(function () {
            con.style.transitionDuration = ".2s";
        },1)
完整例子代碼: 



    
    Title

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93482.html

相關(guān)文章

  • JavaScript 設(shè)置CSS與注意事項(xiàng)

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

    vincent_xyb 評論0 收藏0

  • JQuery基礎(chǔ)修煉-樣式篇

    摘要：具有相同的父元素，并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素?？梢娫氐膶挾然蚋叨?，是大于零。元素的或被認(rèn)為是可見的，因?yàn)樗麄內(nèi)匀徽加每臻g布局。 jQuery對象轉(zhuǎn)化成DOM對象 ? ? jQuery庫本質(zhì)上還是JavaScript代碼，它只是對JavaScript語言進(jìn)行包裝處理，為了是提供更好更方便快捷的DOM處理與開發(fā)常見中經(jīng)常使用的功能。我們可以用jQuery...

    _Dreams 評論0 收藏0

  • JQuery基礎(chǔ)修煉-樣式篇

    摘要：具有相同的父元素，并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素。可見元素的寬度或高度，是大于零。元素的或被認(rèn)為是可見的，因?yàn)樗麄內(nèi)匀徽加每臻g布局。 jQuery對象轉(zhuǎn)化成DOM對象 ? ? jQuery庫本質(zhì)上還是JavaScript代碼，它只是對JavaScript語言進(jìn)行包裝處理，為了是提供更好更方便快捷的DOM處理與開發(fā)常見中經(jīng)常使用的功能。我們可以用jQuery...

    luck 評論0 收藏0

  • 這么多前端優(yōu)化點(diǎn)你都記得住嗎？

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

    ysl_unh 評論0 收藏0

  • 這么多前端優(yōu)化點(diǎn)你都記得住嗎？

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

    Tecode 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<