一般情况下javascript动态插入样式有两种，一种页面中引入外部样式,在93f0f5c25f18dab9d176bd4f6de5d30e中使用2cdf5bf648cf2f33323966d7f58a7f3f标签引入一个外部样式文件，另一种是在页面中使用c9ccee2e6ea535a969eb3f532ad9fe89标签插入页面样式（这里说的不是style属性）。
一、页面中引入外部样式：
在93f0f5c25f18dab9d176bd4f6de5d30e中使用2cdf5bf648cf2f33323966d7f58a7f3f标签引入一个外部样式文件，这个比较简单，各个主流浏览器也不存在兼容性问题：
function includelinkstyle(url) { var link = document.createelement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = url; document.getelementsbytagname("head")[0].appendchild(link); }
直接用引入一个外部样式文件似乎不合适，所以选择了第二种方案，在页面中使用<style>标签插入页面样式。
二、使用<style>标签插入页面样式：
这种方式在各个主流浏览器存在兼容性问题，像firefox等标准浏览器无法直接获取设置stylesheet的csstext值，标准浏览器下只能使用document.stylesheets[0].cssrules[0].csstext单个获取样式；同时使用：document.stylesheets[0].cssrules[0].csstext=newcsstext；页面不会自动更新样式，必须使用：document.stylesheets[0].cssrules[0].style.csstext=newcsstext；这点似乎没坑爹的ie来的人性化和简便。yui中使用了一个很好的办法：style.appendchild(document.createtextnode(styles));采用createtextnode将样式字符串添加到<style>标签内；
function includestyleelement(styles, styleid) { if (document.getelementbyid(styleid)) { return } var style = document.createelement("style"); style.id = styleid; //这里最好给ie设置下面的属性 /*if (isie()) { style.type = "text/css"; style.media = "screen" }*/ (document.getelementsbytagname("head")[0] || document.body).appendchild(style); if (style.stylesheet) { //for ie style.stylesheet.csstext = styles; } else { //for w3c style.appendchild(document.createtextnode(styles)); } } var styles = "#div{background-color: #ff3300; color:#ffffff }"; includestyleelement(styles, "newstyle");
这样页面中的元素就能直接应用样式了，不管你的这些元素是不是通过脚本追加的。
以上就是javascript从外部动态引入样式和文件的用法详解的详细内容。