js怎么样动态添加css呢

喜欢ヅ旅行 2024-03-29 14:30 51阅读 0赞

![17ff3662d877e58c710aca3a675dd8dc.jpeg][]

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1]

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

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

后来我找到以下方法，可以在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);

\}

\}

[17ff3662d877e58c710aca3a675dd8dc.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/223796564d924fb094e7c8d43606cafd.png
[Link 1]: https://www.weidianyuedu.com/
[IE]: https://so.csdn.net/so/search?q=IE%E6%B5%8F%E8%A7%88%E5%99%A8&spm=1001.2101.3001.7020
[Link 2]: https://so.csdn.net/so/search?q=%E6%A0%B7%E5%BC%8F%E8%A1%A8&spm=1001.2101.3001.7020
[rainic.com]: https://rainic.com

发表评论取消回复

表情：

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

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

相关阅读

相关 js怎么样动态添加css呢

![17ff3662d877e58c710aca3a675dd8dc.jpeg][] 转自：[微点阅读][Link 1] [https://www.weidianyuedu.

喜欢ヅ旅行/ 2024年03月29日 14:30/ 0 赞/ 52 阅读

相关怎么样增强家里WiFi信号呢

![87ced01a11dd9d8ec4fd6170b6a19c76.jpeg][] 现在，大家都离不开WiFi了，到亲戚朋友家串个门第一件事也是连WiFi，连得多了，相信大

待我称王封你为后i/ 2024年03月26日 18:40/ 0 赞/ 65 阅读

相关如何用js动态添加css

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1] 为了节省代码和写出更兼容的代码，有时我们需要用Javascr

痛定思痛。/ 2024年03月25日 07:16/ 0 赞/ 72 阅读

相关 C# 怎么样调用python脚本呢

![2badb74fe791ab7009f56fc047757a46.jpeg][] 本文主要介绍了C\ 如何调用python脚本，具有很好的参考价值，希望对大家有所帮助。

Dear 丶/ 2024年03月23日 19:27/ 0 赞/ 85 阅读

相关 JS 动态添加数组

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

忘是亡心i/ 2022年12月21日 06:27/ 0 赞/ 206 阅读

相关应该怎么样学习前端呢？

1、一定要重视基础首先建立第一条技能线：就是前端由html，css，js组成；然后将其细化为第二条线，html是由html4和html5组成；第三条线，css由css2和c

Bertha 。/ 2022年10月17日 13:51/ 0 赞/ 187 阅读

相关 js 动态添加文本框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

落日映苍穹つ/ 2022年06月12日 11:57/ 0 赞/ 246 阅读

相关你的2012怎么样呢

2012年，是我工作进步最大的年份，参与了很多事情，感触很深。 1、纠结的web系统开发，因为采用了大量的dev控件，总的来说系统反映比较慢，陆陆续续的修改来修改去，总达不

偏执的太偏执、/ 2021年11月05日 01:24/ 0 赞/ 389 阅读

相关 JS动态添加标签

JS动态添加标签如代码示例，使用jquery，动态的增加标签： function addDiv(serial) { //最外层父di

秒速五厘米/ 2021年10月15日 15:55/ 0 赞/ 609 阅读

相关 JS实现动态添加外部js、css到head标签的方法

本文实例讲述了JS实现动态添加外部`js、css`到`head`标签的方法。 function appendJQCDN() { var head =

ゝ一纸荒年。/ 2021年06月26日 16:06/ 0 赞/ 550 阅读