关于css动态样式注入，你不知道的那些冷知识

ztyzz 发布于2019-08-29 13:47 / 2852人阅读

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

前言

作为一个前端，我们都听过结构，样式，行为分离；关于样式，我们都听过外联样式，内联样式和行内样式；关于这三者，什么权重啊，啊，对了，这些都不会出现在这篇文章里，这篇文章就说一些那些我们不怎么使用的，动态引入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文件。

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

混合云专线服务你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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