关于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，比如下面这样：

这样写的好处就是，别人在使用你的插件时，无需多去引用你的css文件，这样看起来比较简洁，当然有些利弊也需要你权衡，比如维护你插件样式时，同直接在css样式文件中修改，这样的形式会显得稍微麻烦一些；

动态样式

其实与上面的内联样式动态引入相比，外联样式的动态引入，相信被更多的人熟知。具体步骤就是，创建link标签，设置type属性，设置其href,然后添加到html文件当中；像下面这样：

可以看到html文件中有一个id为dynamicCreation的Link标签，而其关联的就是我们想为其添加的css文件。

以上三种动态样式注入，不同的使用场景，各有利弊，至于你想用哪一种，需要你自己权衡，睡觉去啦。。。。