Javascript动态添加CSS

在项目中涉及到动态添加CSS的问题,从网上查下资料,果然有高手写过。

原文:http://blog.csdn.net/pnuts/archive/2009/02/11/3876328.aspx

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


( ! ) Warning: Missing argument 1 for cwppos_show_review(), called in /data/www/enjoyphp/wp-content/themes/flat/content-single.php on line 29 and defined in /data/www/enjoyphp/wp-content/plugins/wp-product-review/includes/legacy.php on line 18
Call Stack
#TimeMemoryFunctionLocation
10.0001355208{main}( ).../index.php:0
20.0002355496require( '/data/www/enjoyphp/wp-blog-header.php' ).../index.php:17
30.990110186192require_once( '/data/www/enjoyphp/wp-includes/template-loader.php' ).../wp-blog-header.php:19
40.992010257336include( '/data/www/enjoyphp/wp-content/themes/flat/single.php' ).../template-loader.php:74
51.082210812112get_template_part( ).../single.php:5
61.082210812632locate_template( ).../general-template.php:167
71.082310812728load_template( ).../template.php:643
81.082310813112require( '/data/www/enjoyphp/wp-content/themes/flat/content-single.php' ).../template.php:686
91.087310798224cwppos_show_review( ).../content-single.php:29

发表评论

电子邮件地址不会被公开。 必填项已用*标注