JS function to dynamically add CSS style sheet files_Basic knowledge

Give the function first.

Copy code The code is as follows:

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 function accepts up to two parameters!");
}
if(! "v1" ){//Add the automatic conversion transparency function. Users only need to enter the W3C transparent style, and it will automatically be converted into IE's transparent filter
vart=cssCode.match(/opacity:(d?.d );/) ;
if(t!=null){
cssCode=cssCode.replace(t[0],"filter:alpha(opacity=" parseFloat(t[1])*100 ")")
}
}
cssCode=cssCode " ";//Add a newline character at the end to facilitate viewing under firebug.
varheadElement=doc.getElementsByTagName("head")[0];
varstyleElements=headElement.getElementsByTagName("style");
if(styleElements.length==0){//If style does not exist Element is created
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;//Firefox support Add the style sheet string directly to innerHTML
}else{
styleElement.appendChild(doc.createTextNode(cssCode))
}
}

Sometimes we need to add .js The file dynamically introduces some CSS styles to the document. For some short CSS codes, this is easy to handle. We can call its style method, such as

Copy code The code is as follows:

varddd=document.getElementById("ddd");
ddd.style.border="1pxsolidred";

It doesn’t matter if it’s longer:

Copy code The code is as follows:

varddd=document.getElementById("ddd");
ddd.style.cssText="border:1pxsolidred;color:#000;background:#444;float:left";

Personally, I like the latter. Because the former has serious compatibility issues. For example, the float style is styleFloat in IE, and cssFloat in W3C standard browsers such as Firefox. And cssText is universal.
If it is very long, we can dynamically import a CSS file. For example,

Copy code The code is as follows:

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);
}

This function is a bit cumbersome in IE. I have always used the native functions of whichever browser supports it, and using binary code directly is the most efficient.

Copy code The code is as follows:

varoStylesheet=document.createStyleSheet(sURL,iIndex);

The two parameters of createStyleSheet are optional.
But if our style is unique to a certain page and can only be used by administrators, and that part of the page is dynamically generated, do we need to introduce it from the beginning? Do I need to create a special file to load it? The best way is to have these styles bundled with dynamic scripts. This function was developed for this purpose.
Frankly speaking, it was originally developed for rich text editors. As we all know, the most popular way to use a rich text input box is to put the content to be entered into an iframe. This involves two types of documents, one is the document of the main page, and the other is the document of the iframe. The document of iframe also involves compatibility issues. We can:
variframe=document.createElement('iframe');//Generate richtexteditor for editing
variframeDocument=iframe.contentDocument||iframe.contentWindow.document;
......
　Well , too far away. All in all, the initial judgment of the function is prepared for these two documents. If there is no iframe involved, we only need to pass in one parameter. The last parameter is always a CSS string.
Then there is the problem of dynamically generating the styleSheet element and adding the CSS string to this element. Of course, if there is one at the current stage, of course, use the ready-made one. The more DOM elements there are, the greater the burden on the browser. We think of the document.styleSheets method. It returns a collection, including style elements and link elements, and also involves a compatibility issue, such as:

Copy code The code is as follows:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">
<%# Force IE8 to render web pages like IE7 -%>

<%# --By default, all links are opened in this window-%>


<%=stylesheet_link_tag"screen","button","style"%>


<%=javascript_tag"window._token='#{form_authenticity_token}'"ifActionController::Base .allow_forgery_protection%>
<%=javascript_include_tag:defaults%>




Use alert(document.styleSheets.length); to test it above. IE returns 6 and W3C browser returns 5. Therefore, it was rejected. And we only use the style element, not external links. The second part of the judgment is for the style element in the head. If it does not exist, create one. Then we just add the CSS string to the first style element.
Next we need to add a safety lock, because when media="print", the defined effect is only effective when the page is printed. In order to prevent the media value of the first style element from being different from screen, we have to change it.

Copy code The code is as follows: varstyleElement=styleElements[0];

varmedia= styleElement.getAttribute("media");

if(media!=null&&!/screen/.test(media.toLowerCase())){
styleElement.setAttribute("media","screen");
}


Attached are some instructions from the media.
screen (default value), submitted to the computer screen;

print, output to the printer;
projection, submitted to the projector;
aural, speaker;
braille, submitted to the embossed character Tactile sensing devices;
　tty, teletypewriter (using fixed fonts);
　tv, television set;
　all, all output devices.
The last question added is this. There are three types of browsers: IE, Firefox and other browsers. Determining browsers also uses their own private properties or methods. For example, styleSheet is used exclusively by IE, and getBoxObjectFor is used exclusively by Firefox (of course you can also use (/firefox/.test(navigator.userAgent.toLowerCase()))). Usually DOM operations are the most time-consuming. If you can use private Use private!
Usage method:



Copy code

The code is as follows:

addSheet("
.RTE_iframe{width:600px;height:300px;}
.RTE_toolbar{width:600px;}
.color_result{width:216px;}
. color_view{width:110px;height:25px;}
.color_code{text-align:center;font-weight:700;color:blue;font-size:16px;}
div.table{width:176px ;position:absolute;padding:1px;}
div.tabletd{font-size:12px;color:red;text-align:center;}
");*/
Compare the customer service of 51js Guoguo script is shorter, but it may create multiple style elements, and there are some efficiency issues... After all, I originally developed this for rich text editing, and it is not powerful enough!
/*
Rules for dynamically adding style sheets
*/
iCSS={add:function(css){
varD=document,$=D.createElement('style');
$.setAttribute("type","text/css");
$.styleSheet&&($.styleSheet.cssText=css)||
$.appendChild(D.createTextNode(css));
D.getElementsByTagName('head')[0].appendChild($);
}};
iCSS.add("
.dhoooListBox,.dhoooListBoxli{margin:0;padding:0 ;list-style-type:none;font-size:12px;cursor:default}
.dhoooListBox{border:1pxsolid#aaa;width:180px;background:#eee;height:200px;overflow:auto;float: left}
.dhoooListBoxli{margin:5px;line-height:24px;background:url(images/smilies/time.gif)no-repeat060%;padding-left:25px;color:#555;}
.dhoooListBoxli.selected{background-color:#FFCC33}
");
Finally, add a few related methods:
vargetClass=function(ele){
returnele.className.replace(/s /,'').split('');
};
varhasClass=function(ele,cls){
returnele.className.match(newRegExp('(s|^)' cls '( s|$)'));
}
varaddClass=function(ele,cls){
if(!this.hasClass(ele,cls))ele.className ="" cls;
}
varremoveClass=function(ele,cls){
if(hasClass(ele,cls)){
varreg=newRegExp('(s|^)' cls '(s|$)');
ele.className=ele.className.replace(reg,'');
}
}