关于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文件。

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