js怎么样动态添加css呢

喜欢ヅ旅行 2024-03-29 14:30 47阅读 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 条评论，47人围观）

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

相关阅读

相关如何用js动态添加css

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

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

相关 JS 动态添加数组

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

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

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

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

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

相关 js 动态添加文本框

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

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

相关 angualrjs动态添加类名动态改变css

实现目标： 1.点击收藏商品，先判断是否登录，没有登录跳转到登录页面 2.登录的话，把a跳转隐藏，切换背景图片实现收藏路由：

ゝ一世哀愁。/ 2022年06月04日 06:16/ 0 赞/ 206 阅读

相关你的2012怎么样呢

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

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

相关 JS动态添加标签

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

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

相关怎么样才能变得自律呢？

最近两周时间，我竟然迷上了Dota2（一款补兵、杀人、推塔类的游戏）。也许算不上入迷，应该说是旧情复燃——7年前我曾热衷于Dota1，和几个小伙伴窝在宿舍里不分昼夜的开黑

我不是女神ヾ/ 2021年09月12日 05:06/ 0 赞/ 439 阅读

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

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

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

相关怎么样才能变得自律呢？

❣️ 人生最大的捷径，是阅读一流的书｜第154篇 ![640?wx\_fmt=jpeg][640_wx_fmt_jpeg] ![640?wx\_fmt=gif][640

小灰灰/ 2021年05月11日 20:35/ 0 赞/ 529 阅读