前言作为前端，我们都听说过结构、样式、行为分离；关于样式，我们都听说过轮廓样式、内联样式、内联样式；关于这三个的权重，啊，对了，这些不会出现在本文中。这篇文章会讲一些我们用的不多的方法，动态导入css样式；介绍前面提到的静态样式outline样式、内联样式和内联样式，所谓outline样式，即样式文件是一个单独的css文件，通过link标签引入；而内联样式是一种存在于html文件中的样式，但不同于页面结构元素是分离的，它们都存在于style标签中；而内联样式，即存在于某个标签中，只对当前元素有效；这么多，一图胜千言；废话不用图，有图会说话。是不是一下子就明白了，快点赞。引入风格的不同方式也注定了作用范围不同。outlink可以应用于多个html文件中多个htm页面的多个dom节点，两个或多个；inline只能应用于单个html页面，有多个dom节点；行中，数量不多，只能作用于单个页面style属性所在的dom节点。其实HTML文件中静态样式的引入，只要是前端的都应该了解，所以本文重点介绍动态样式的引入，以及一些不常用但可能适用的方法；内联样式看下面一段代码：vartriangle=document.createElement('label');triangle.style.width='0';triangle.style.height='0';triangle.style.position='绝对';triangle.style.left='50%';triangle.style.top='99%';triangle.style.marginLeft='-5px';triangle.style.borderLeft='5px实心透明';triangle.style.borderRight='5px实心透明';triangle.style.borderTop='5px纯白';triangle.style.borderTopColor=style.backgroundColor;label.appendChild（三角形）；这种写法应该很常见，创建一个元素（当然你也可以获取一个元素），然后用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;"（推荐）style属性是事先写在一个style类中，比如.triangle{width:0;height:0;position:absolute;}，然后在js运行中，只要一个triangle.classList.add('.triangle'),为元素动态添加样式类（强烈推荐）这里有一个重点，容易出错，在使用dom.style为元素设置其浮动样式时，dom.style.float='left'不可用，为什么，因为float在css中是关键字，要设置它的浮动属性，非IE浏览器必须使用cssFloat()，而IE使用styleFloat，我走过的坑，希望大家不要再跳下去；虽然我们强烈推荐上面的第三种内联样式，一种通过添加类样式的方式给元素添加样式，但是在引入一些插件的时候，我们导入他们的js的时候，我们也要相应的导入他们的css，比如下面这样：觉得有点烦，我自己写插件比较喜欢别人用的时候，只需要一个文件就可以达到目的，不需要在页面上额外添加请求，那么这个怎么做呢？那就是样式的动态引入。如果你写的插件只涉及一点样式操作，像我写的解决Echarts单轴雷达轮播的插件，那么直接操作上面说的内联样式就可以了；但是如果涉及到大型样式和插件样式的动态转换，引入样式类就比较容易了。和上面截图不同的是，我们把样式写在插件的JS里面，然后在调用插件的时候动态注入我们的样式。类，具体操作如下：仔细看，可以发现sytleStr其实就是我们平时css文件中定义的样式字符串，然后动态创建一个sytle标签（设置它的类型很重要），并通过stylestring通过character将string节点注入到label中，最后将这个label添加到引用的js关联的html文件的头部。得到的效果如下：这样写的好处是别人在使用你的插件时，不需要多引用你的css文件，看起来更简洁。当然，你需要权衡一些优点和缺点。比如在维护你的插件样式时，直接在css样式文件中修改即可。这个表格会有点麻烦；dynamicstyles其实是相对于上面动态引入的inlinestyles，动态引入outlinestyles相信更多人会比较熟悉具体步骤是创建一个link标签，设置type属性，设置它的href，然后添加到html文件中；如下：可以看到html文件中有一个id为dynamicCreation的Link标签，它的关联就是我们要创建它添加的css文件。以上三种动态样式注入在不同的使用场景下各有优缺点。至于你想用哪一个，你需要自己权衡一下，然后睡觉。...
