js怎么样动态添加css呢

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

17ff3662d877e58c710aca3a675dd8dc.jpeg

转自：微点阅读 https://www.weidianyuedu.com

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

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

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

}

}

发表评论

表情：
评论列表 （有 0 条评论，178人围观）

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

相关阅读

    相关 你的2012怎么样呢

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

    偏执的太偏执、偏执的太偏执、/ 0 赞/ 550 阅读