如何用js动态添加css

痛定思痛。 2024-03-25 07:16 68阅读 0赞

转自：[微点阅读][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);

\}

\}

[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 条评论，68人围观）

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

相关阅读

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

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

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

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

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

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

相关如何用js动态添加css

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

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

相关如何将 Bootstrap CSS 和 JS 添加到 Thymeleaf

1. 简介在本文中，我们将介绍几种将Bootstrap 库添加到Thymeleaf 项目的方法。我们将使用静态资源、内容交付网络和 webjar 库包含 Bootstr

水深无声/ 2023年09月25日 13:19/ 0 赞/ 97 阅读

相关 120.如何使用 JS 动态更新CSS变量

效果 (源码网盘地址在最后) ![4c518e1756174ee4d4af5783b754e4b3.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

雨点打透心脏的1/2处/ 2022年12月29日 06:47/ 0 赞/ 125 阅读

相关 JS 动态添加数组

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

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

相关 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 阅读

相关 JS动态添加标签

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

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

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

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

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