先给出函数。
varaddsheet=function(){
vardoc,csscode;
if(arguments.length==1){
doc=document;
csscode=arguments[0]
}elseif(arguments.length==2){
doc=arguments[0];
csscode=arguments[1];
}else{
alert("addsheet函数最多接受两个参数!");
}
if(!+"v1"){//增加自动转换透明度功能，用户只需输入w3c的透明样式，它会自动转换成ie的透明滤镜
vart=csscode.match(/opacity:(d?.d+);/);
if(t!=null){
csscode=csscode.replace(t[0],"filter:alpha(opacity="+parsefloat(t[1])*100+")")
}
}
csscode=csscode+" ";//增加末尾的换行符，方便在firebug下的查看。
varheadelement=doc.getelementsbytagname("head")[0];
varstyleelements=headelement.getelementsbytagname("style");
if(styleelements.length==0){//如果不存在style元素则创建
if(doc.createstylesheet){//ie
doc.createstylesheet();
}else{
vartempstyleelement=doc.createelement('style');//w3c
tempstyleelement.setattribute("type","text/css");
headelement.appendchild(tempstyleelement);
}
}
varstyleelement=styleelements[0];
varmedia=styleelement.getattribute("media");
if(media!=null&&!/screen/.test(media.tolowercase())){
styleelement.setattribute("media","screen");
}
if(styleelement.stylesheet){//ie
styleelement.stylesheet.csstext+=csscode;
}elseif(doc.getboxobjectfor){
styleelement.innerhtml+=csscode;//火狐支持直接innerhtml添加样式表字串
}else{
styleelement.appendchild(doc.createtextnode(csscode))
}
}
有时我们需要在.js文件对文档动态引入一些css样式。对于一些短小的css代码来说，这好办，我们可以调用其style方法，如
varddd=document.getelementbyid("ddd");
ddd.style.border="1pxsolidred";
如果再长一点也无所谓：
varddd=document.getelementbyid("ddd");
ddd.style.csstext="border:1pxsolidred;color:#000;background:#444;float:left";
functionaddsheetfile(path){
varfileref=document.createelement("link")
fileref.rel="stylesheet";
fileref.type="text/css";
fileref.href=path;
fileref.media="screen";
varheadobj=document.getelementsbytagname('head')[0];
headobj.appendchild(fileref);
}
这个函数在ie中有点累赘。我向来是支持哪个游览器就用哪个游览器的原生函数，直接使用二进制代码效率最高。
varostylesheet=document.createstylesheet(surl,iindex);
createstylesheet带的两个参数都是可选的。
但如果我们的样式是某个页面独有的，而且只有管理员才能使用到，而且那部分页面是动态生成的，我们需要一开始就引入它吗？需要特意弄个文件来装载它吗？最好的方法让这些样式与动态脚本捆绑在一起。我这个函数就为此而开发的。
坦白说，它最开始是为富文本编辑器而开发的。大家都知道，富文本输入框最流行的做法是把要输入的内容放到iframe中，这就涉及到两种document，一个主页面的document，另一个是iframe的document。iframe的document又涉及到兼容问题。我们可以：
variframe=document.createelement('iframe');//生成用于编辑的richtexteditor
variframedocument=iframe.contentdocument||iframe.contentwindow.document;
……
总而言之，函数最开始的判定就是为这两种document而准备。如果没有涉及到iframe，我们只传入一个参数就行了。最后一个参数永远是css字符串。
然后是动态生成stylesheet元素，把css字符串加入到此元素的问题。当然如果有现阶段的，当然就用现成的。dom元素越多对游览器的负担就越大。我们想到document.stylesheets方法。它返回一个集合，包含style元素与link元素，还涉及一兼容问题，如：
<!doctypehtmlpublic"-//w3c//dtdxhtml1.0transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<htmlxmlns="
<head>
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
<%#强制ie8像ie7一样呈现网页-%>
<metahttp-equiv=”x-ua-compatible”content=”ie=emulateie7″/>
<%#--默认所有的链接都在本窗口打开-%>
<basetarget="_self"/>
<title><%=h(yield(:title))||controller.action_name%></title>
<%=stylesheet_link_tag"screen","button","style"%>
<linkrel="stylesheet"href="/stylesheets/print.css"type="text/css"media="print">
<!--[ifltie8]>
<linkrel="stylesheet"href="/stylesheets/ie.css"type="text/css"media="screen">
<![endif]-->
<%=javascript_tag"window._token='#{form_authenticity_token}'"ifactioncontroller::base.allow_forgery_protection%>
<%=javascript_include_tag:defaults%>
<styletype="text/css"media="print"></style>
</head>
上面用alert(document.stylesheets.length);测试一下，ie返回6，w3c游览器返回5。因此，否决了它。而且我们只用到style元素，不使用外联。第二部分的判定就针对head中的style元素而言，没有就创建一个。然后我们把css字符串加在第一个style元素就行了。
接着我们要加把保险锁，因为当media="print"时，只在页面打印时，定义的效果才有效。为了防止第一个style元素的media值不是screen，我们得改一改。
varstyleelement=styleelements[0];
varmedia=styleelement.getattribute("media");
if(media!=null&&!/screen/.test(media.tolowercase())){
styleelement.setattribute("media","screen");
}
以上就是如何利用javascript函数添加css样式代码实例详解的详细内容。