Home >Web Front-end >JS Tutorial >Detailed explanation of how to use javascript function to add css style code example

Detailed explanation of how to use javascript function to add css style code example

伊谢尔伦Original: 2017-07-21 15:13:002604browse

Give the function first.

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(&#39;style&#39;);//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)) 
} 
}

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

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

It doesn’t matter if it is longer:

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(&#39;head&#39;)[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.

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;
......
In short , 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:

<!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=&#39;#{form_authenticity_token}&#39;"ifActionController::Base.allow_forgery_protection%> 
<%=javascript_include_tag:defaults%> 
<styletype="text/css"media="print"></style> 
</head>

Use alert(document.styleSheets.length); to test it above, IE returns 6, W3C Tour The processor 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.

varstyleElement=styleElements[0]; 
varmedia=styleElement.getAttribute("media"); 
if(media!=null&&!/screen/.test(media.toLowerCase())){ 
styleElement.setAttribute("media","screen"); 
}

The above is the detailed content of Detailed explanation of how to use javascript function to add css style code example. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of JavaScript local modification and global modification of css style examplesNext article：Detailed explanation of JavaScript local modification and global modification of css style examples

See more

Detailed explanation of how to use javascript function to add css style code example

Related articles