Shulou(Shulou.com)05/31 Report--

Today Xiaobian to share with you how to use javascript dynamic generation of css code related knowledge points, detailed content, clear logic, I believe that most people are too aware of this knowledge, so share this article for your reference, I hope you will learn something after reading this article, let's take a look at it.

Two methods of dynamically generating css Code by javascript

Sometimes we need to use js to dynamically generate the css code in the style tag on the page, which is straightforward by creating a style element, setting the css code in the style element, and finally inserting it into the head element. But there are some compatibility issues that we need to solve. First of all, in browsers that conform to the W3C standard, we only need to insert the css code to be inserted into the style element as a text node, while in IE we need to use the styleSheet.cssText of the style element to solve the problem. It is also important to note that in some versions of IE, there is a limit on the number of style tags on a page, and if you exceed it, you will report an error, you need to consider this.

Method 1:

Add an id name to the tag and write in the tag

Var oCss=document.getElementById ("css"); oCSS [XSS _ clean] + = "# box {width:200px;}"

So you can add style.

Method 2:

Sometimes we need to use js to dynamically generate the css code in the style tag on the page, which is straightforward by creating a style element, setting the css code in the style element, and finally inserting it into the head element. But there are some compatibility issues that we need to solve. First of all, in browsers that conform to the W3C standard, we only need to insert the css code to be inserted into the style element as a text node, while in IE we need to use the styleSheet.cssText of the style element to solve the problem. It is also important to note that in some versions of IE, there is a limit on the number of style tags on a page, and if you exceed it, you will report an error, you need to consider this.

Put the code directly below and take a look at the notes.

Function addCSS (cssText) {var style = document.createElement ('style'), / / create a style element head = document.head | | document.getElementsByTagName (' head') [0]; / / get head element style.type = 'text/css' / / it must be shown here that the type attribute of the style element is set to text/css, otherwise it will not work in ie if (style.styleSheet) {/ / IE var func = function () {try {/ / prevent the error style.styleSheet.cssText = cssText when the number of stylesheet in the IE exceeds the limit } catch (e) {}} / / if the current styleSheet is not available, the line if (style.styleSheet.disabled) {setTimeout (func,10);} else {func ();}} else {/ / W3C / / W3C browser simply create a text node and insert it into the style element var textNode = document.createTextNode (cssText); style.appendChild (textNode) } head.appendChild (style); / / insert the created style element into head} / / use addCSS ('# demo {height: 30px; background:#f00;}')

Of course, this is only the most basic demonstration method, which needs to be improved in practical application, such as inserting each generated css code into a style element, so that the number of stylesheet errors in IE will not exceed the limit.

These are all the contents of the article "how to use javascript to generate css code dynamically". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.