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

前言

做爲一個前端，咱們都聽過結構，樣式，行爲分離；關於樣式，咱們都聽過外聯樣式，內聯樣式和行內樣式；關於這三者，什麼權重啊，啊，對了，這些都不會出如今這篇文章裏，這篇文章就說一些那些咱們不怎麼使用的，動態引入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的樣式類屬性方法）：

1. triangle.style ="width:0;height:0;position:absolute;"(不推薦)
2. triangle.style.cssText ="width:0;height:0;position:absolute;"(推薦)
3. 首先將上面的樣式屬性事先寫在一個樣式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文件。

以上三種動態樣式注入，不一樣的使用場景，各有利弊，至於你想用哪種，須要你本身權衡，睡覺去啦。。。。