Detailed introduction to the details of how JavaScript uses two methods to dynamically generate CSS code.

This article mainly introduces javascript Two methods of dynamically generating css code. Sometimes we need to use js to dynamically generate css code in the style tag on the page. Here are two methods to introduce to you Methods, friends in need can refer to

javascript Two methods of dynamically generating css code

Sometimes we need to use js to dynamically generate the style tag in the page css code, 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 resolve. First of all, in browsers that comply with the w3c standard, 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. solve. 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.

Method 1:

Add an id name to the

var oCss=document.getElementById("css");

oCss.innerHTML+="#box{width:200px;}";

in the <script> tag <p>This way you can add styles. <p><strong>Method 2: <p> 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 resolve. 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, there is a limit to the number of style tags on a page. If it is exceeded, an error will be reported. This needs to be considered. <p>Put the code directly below and see the <a href="http://www.php.cn/code/8105.html" target="_blank"> comments for instructions. <pre class='brush:php;toolbar:false;'>function addCSS(cssText){ var style = document.createElement(&amp;#39;style&amp;#39;), //创建一个style元素 head = document.head || document.getElementsByTagName(&amp;#39;head&amp;#39;)[0]; //获取head元素 style.type = &amp;#39;text/css&amp;#39;; //这里必须显示设置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(&amp;#39;#demo{ height: 30px; background:#f00;}&amp;#39;);</pre><p>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 stylesheet will not occur in IE. The quantity exceeds the limit error. <p><strong>Summary: The above methods can solve many problems. If you have any questions, please contact me! </script>

The above is the detailed content of Detailed introduction to the details of how JavaScript uses two methods to dynamically generate CSS code.. For more information, please follow other related articles on the PHP Chinese website!