js动态添加css

最新推荐文章于 2025-09-11 15:18:57 发布

转载最新推荐文章于 2025-09-11 15:18:57 发布 · 7.1k 阅读

文章标签：

#safari #css #opera #chrome #javascript #浏览器

本文介绍了一种使用JavaScript动态添加CSS样式的跨浏览器兼容方法。该方法可在IE、Firefox、Opera、Safari及Chrome等主流浏览器中运行。通过创建style元素并设置其textContent属性来实现动态加载样式。

为了节省代码和写出更兼容的代码，有时我们需要用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);
}
}