JS动态增加CSS样式的方法

野性酷女 2024-04-01 13:11 89阅读 0赞

![49b2c659c2bceb1d17c005475b5342b0.jpeg][]

为了节省代码和写出更兼容的代码，有时我们需要用Javascript动态的增加CSS样式。

IE下，我们可以使用 document.createStyleSheet() 方法；而在非IE浏览器上，就不支持这个方法。可以使用document.styleSheets\[0\]，但要求网页里必须最少已经加载过一个[样式表][Link 1]。

后来我找到以下方法，可以在Firefox、Opera下正常运行：

var str\_css = "body \{font-size:12px;\}";

var style = document.createElement("style");

style.type = "text/css";

style.innerHTML = str\_css;

document.getElementsByTagName("HEAD").item(0).appendChild(style);

但这种方法却在Safari、Chrome下不可行，原因是style.innerHTML不可写。我再找解决方案，发现用textContent代替innerHTML的方法可行。

最后，我发个原创JS动态增加CSS样式的方法，兼容目前流行的任意浏览器：

function add\_css(str\_css) \{ //Copyright @ rainic.com

try \{ //IE下可行

var style = document.createStyleSheet();

style.cssText = str\_css;

\}

catch (e) \{ //Firefox,Opera,Safari,Chrome下可行

var style = document.createElement("style");

style.type = "text/css";

style.textContent = str\_css;

document.getElementsByTagName("HEAD").item(0).appendChild(style);

\}

\}

来源：[微点阅读][Link 2] [https://www.weidianyuedu.com][Link 2]

[49b2c659c2bceb1d17c005475b5342b0.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8258d71ca6694d2cb38ab5dc2c80d7e0.jpeg
[Link 1]: https://so.csdn.net/so/search?q=%E6%A0%B7%E5%BC%8F%E8%A1%A8&spm=1001.2101.3001.7020
[Link 2]: https://www.weidianyuedu.com

发表评论取消回复

表情：

评论列表（有 0 条评论，89人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS设置CSS样式的方法。

![1ddf613920181db178972859d3c46600.jpeg][] 用JS来动态设置CSS样式，常见的有以下几种 1. 直接设置style的属性某些情况

旧城等待，/ 2024年04月01日 18:25/ 0 赞/ 109 阅读

相关 JS动态增加CSS样式的方法

![49b2c659c2bceb1d17c005475b5342b0.jpeg][] 为了节省代码和写出更兼容的代码，有时我们需要用Javascript动态的增加CSS样式。

野性酷女/ 2024年04月01日 13:11/ 0 赞/ 90 阅读

相关怎么用JS来动态设置CSS样式

![dc189ef2ec0263b723d1f140ef5c690a.jpeg][] 用JS来动态设置CSS样式，常见的有以下几种： 1. 直接设置style的属性某些情

Love The Way You Lie/ 2024年03月26日 02:20/ 0 赞/ 80 阅读

相关在js中动态不同条件引入不同的css样式文件封装方法

js中动态不同的css样式文件的封装方法封装方法代码实现封装方法 function loadStyles(url) {

Bertha 。/ 2022年09月04日 11:50/ 0 赞/ 194 阅读

相关 js的动态增加控件

例子一： <script type="text/javascript"> var t = 1; function addFile() \{

悠悠/ 2022年06月12日 07:38/ 0 赞/ 196 阅读

相关 javascript 动态修改css样式方法+JQuery中操作Css样式的方法

JS 显示/隐藏 var img=document.getElementsByName("img"); function onclick

桃扇骨/ 2022年06月09日 09:10/ 0 赞/ 341 阅读

相关 js修改css样式的几种方法

参考：[https://www.cnblogs.com/LiuWeiLong/p/6058059.html][https_www.cnblogs.com_LiuWeiLong_

青旅半醒/ 2022年04月22日 04:28/ 0 赞/ 271 阅读

相关 js中实现对动态内容的css样式修饰

下面的代码可以实现将css样式修饰的内容动态显示，先获取变量，然后一：用createElement()函数创建相应的元素标签，如创建一个div：var div1=d

比眉伴天荒/ 2022年04月01日 15:21/ 0 赞/ 199 阅读

相关 js动态设置css样式和标签属性值

> 使用js为css动态设置样式，有时候不起作用，或者在有的地方起作用，有的地方不起作用，没有找到原因，所以就在此记录下用到的方法 jquery的方法： 1. attr(

Myth丶恋晨/ 2022年01月26日 05:49/ 0 赞/ 333 阅读

相关 android动态增加控件时控制样式的方法

　　在学习android的动画时，发现所谓的tween动画只是改变绘制效果并不改变原控件的位置时是颇为失望的，虽然3.0之后已经有了property animation，但是由

素颜马尾好姑娘i/ 2021年11月22日 18:04/ 0 赞/ 256 阅读