Insert styles using javascript_javascript tips

1. Use javascript to insert style Sometimes we need to use js to dynamically generate the css code in the style tag on the page. The method is very straightforward, that is, directly create a style element, then set the css code in the style element, and finally insert it into the head element.

But there are some compatibility issues we need to solve. First of all, in browsers that comply with w3c standards, we only need to insert the css code to be inserted into the style element as a text node. In IE, we need to use the styleSheet.cssText of the style element to solve the problem.

It should also be noted that in some versions of IE, the number of style tags on a page is limited. If it is exceeded, an error will be reported. This needs to be considered.

function addCSS(cssText){ var style = document.createElement('style'), //创建一个style元素 head = document.head || document.getElementsByTagName('head')[0]; //获取head元素 style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css，否则在ie中不起作用 if(style.styleSheet){ //IE var func = function(){ try{ //防止IE中stylesheet数量超过限制而发生错误 style.styleSheet.cssText = cssText; }catch(e){

} } //如果当前styleSheet还不能用，则放到异步中则行 if(style.styleSheet.disabled){ setTimeout(func,10); }else{ func(); } }else{ //w3c //w3c浏览器中只要创建文本节点插入到style元素中就行了 var textNode = document.createTextNode(cssText); style.appendChild(textNode); } head.appendChild(style); //把创建的style元素插入到head中 }

//使用 addCSS('#demo{ height: 30px; background:#f00;}'); Copy after login Of course, this is just the most basic demonstration method, and it needs to be improved in actual application. For example, insert the css code generated each time into a style element, so that the number of stylesheets will not exceed the limit in IE. Wrong.

Package:

Copy code The code is as follows: var importStyle=function importStyle(b){var a=document.createElement ("style"),c=document;c.getElementsByTagName("head")[0].appendChild(a);if(a.styleSheet){a.styleSheet.cssText=b}else{a.appendChild(c. createTextNode(b))}}; importStyle('h1 { background: red; }');//Call

seajs package

Copy code The code is as follows: seajs.importStyle=function importStyle(b){var a=document. createElement("style"),c=document;c.getElementsByTagName("head")[0].appendChild(a);if(a.styleSheet){a.styleSheet.cssText=b}else{a.appendChild(c .createTextNode(b))}}; 2. JavaScript insertion style Use the tag in to introduce an external style file. This is relatively simple, and there are no compatibility issues with major browsers:

function includeLinkStyle(url) { var link = document.createElement(“link”); link.rel = “stylesheet”; link.type = “text/css”; link.href = url; document.getElementsByTagName(“head”)[0].appendChild(link); }

includeLinkStyle(“http://css.xxx.com/home/css/reset.css?v=20101227”); Copy after login The above is the entire content of this article, I hope it will be helpful to everyone’s study.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Insert styles using javascript_javascript tips