關于css動態樣式注入，你不知道的那些冷知識

ztyzz 發布于2019-08-29 13:47 / 3016人閱讀

摘要：以上三種動態樣式注入，不同的使用場景，各有利弊，至于你想用哪一種，需要你自己權衡，睡覺去啦。。。。

前言

作為一個前端，我們都聽過結構，樣式，行為分離；關于樣式，我們都聽過外聯樣式，內聯樣式和行內樣式；關于這三者，什么權重啊，啊，對了，這些都不會出現在這篇文章里，這篇文章就說一些那些我們不怎么使用的，動態引入css樣式的方法；

靜態樣式引入

前面說過外聯樣式，內聯樣式和行內樣式，所謂外聯樣式，即樣式文件是一個多帶帶的css文件，通過link標簽引入；而內聯樣式，是一種存在于html文件中，但與頁面結構元素分離的，他們都是以存在于style標簽中；而行內樣式，即存在于某一個標簽中，他們只對當前元素有效；說那么多，一張圖勝過千言萬語；

無圖說鬼話，有圖說人話。是不是一下全看懂了，快夸我。樣式引入方式的不同，也注定了他們作用的范圍不同，外聯能作用域多個html文件的多個htm頁面的多個dom節點，兩個多個；內聯只能作用于單個html頁面的多個dom節點；而行內嘛,就沒多個了,就只能作用單個頁面的樣式屬性所在的dom節點。

動態態樣式引入

其實，HTML文件靜態樣式引入，只要是一個前端，應該都明白，所以這篇文章，重點是要說動態樣式的引入，說一些不常見當可能很適用的方法；

行內樣式

看下面一段代碼：

    var triangle = document.createElement("label");
    triangle.style.width = "0";
    triangle.style.height= "0";
    triangle.style.position="absolute";
    triangle.style.left ="50%";
    triangle.style.top ="99%";
    triangle.style.marginLeft = "-5px";
    triangle.style.borderLeft = "5px solid transparent";
    triangle.style.borderRight = "5px solid transparent";
    triangle.style.borderTop= "5px solid white";
    triangle.style.borderTopColor = style.backgroundColor;
    label.appendChild(triangle);

這樣的寫法應該很常見吧，創建一個元素（當然你也可以獲取一個元素），然后使用js代碼為其動態添加樣式,有可能你會問，這屬性一個一個寫，為啥不能直接對象，比如下面這樣：

    triangle.style ={
        width:"0",
        height:"0",
        position:"absolute"
    }

注意哈，不行哈，這是絕對不行的，重要的事情重點標注，那如果我想以對象的方式為元素添加樣式呢？有，方法還不止一種（操作HTML的樣式類屬性方法）：

triangle.style ="width:0;height:0;position:absolute;"(不推薦)

triangle.style.cssText ="width:0;height:0;position:absolute;"(推薦)

首先將上面的樣式屬性事先寫在一個樣式class里，比如
.triangle{width:0;height:0;position:absolute;},然后在js操作中，只需一句triangle.classList.add(".triangle"),動態為元素添加一個樣式類
（極力推薦）

這里說一個重點，易錯點,使用dom.style為元素設置其浮動樣式時，不可用dom.style.float = "left"，為什么，因為float在css中是關鍵詞，要設置其浮動屬性，非IE瀏覽器得使用cssFloat（），而IE使用styleFloat,我走過的坑，但愿你不要再跳下去；

內聯樣式

雖然上面我們極力推薦第3種來添加類樣式為元素添加樣式，但在一些插件的引入的時候，我們在引入其js的時候，還得相應的引入其css，比如下面這樣：

是不是覺得有點煩，我個人寫插件比較喜歡別人使用時，只需要一個文件就達到目的，而無需多在頁面增加一次請求，所以這怎么做呢？
那就是樣式的動態引入，如果你所寫的插件只涉及到少許的樣式操作，像我寫的解決Echarts單軸雷達輪播那個插件，那用上面提到的直接操作行內樣式就夠了；但是如果涉及到大片的樣式和插件樣式動態變換，那么還是引入樣式類比較簡便，與上面截圖不一樣的是，我們是將樣式寫在插件的JS中，然后插件被調用時，動態注入我們的樣式類，具體操作如下:

仔細看看，可以發現，sytleStr其實就是我們通常css文件中定義的那些樣式字符串，然后動態創建了一個sytle標簽（設置其type很重要），并將樣式字符串通過字符串節點的形式注入到標簽中，最后將這個標簽添加到被引用js所關聯的html文件head頭部，所形成的效果就是下面這樣:

這樣寫的好處就是，別人在使用你的插件時，無需多去引用你的css文件，這樣看起來比較簡潔，當然有些利弊也需要你權衡，比如維護你插件樣式時，同直接在css樣式文件中修改，這樣的形式會顯得稍微麻煩一些；

動態樣式

其實與上面的內聯樣式動態引入相比，外聯樣式的動態引入，相信被更多的人熟知。具體步驟就是，創建link標簽，設置type屬性，設置其href,然后添加到html文件當中；像下面這樣：

可以看到html文件中有一個id為dynamicCreation的Link標簽，而其關聯的就是我們想為其添加的css文件。

以上三種動態樣式注入，不同的使用場景，各有利弊，至于你想用哪一種，需要你自己權衡，睡覺去啦。。。。

GPU云服務器云服務器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

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

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

css魔幻屬性跟進篇

摘要：中是這樣定義的屬性指定一個元素應沿其容器的左側或右側放置，允許文本和內聯元素環繞它。其同樣適用于設置屬性為絕對定位或固定定位的內聯元素。至于為什么，可以理解為內聯元素沒有盒模型，其高度由內容決定。白話：即上一篇我腦中飄來飄去的css魔幻屬性自己的文章推出之后，這是自己寫的第四篇CSS相關的文章，文章絕大部分是自己工作總結得來，另一部分是平日sf回答的與面試中向面試官交流學到的，都是一...

oogh 2019-08-30 14:16 評論0 收藏0
css - 收藏集 - 掘金

摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...

phpmatt 2019-08-29 12:41 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

dailybird 2019-08-01 18:28 評論0 收藏0