Use javascript insert style and javascript insert Style

Use javascript insert style and javascript insert Style

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

However, we need to solve some compatibility problems. Text to solve.

Note that in some versions of IE, the number of style labels on a page is limited. If the number of style labels exceeds the limit, an error is returned.

Function addCSS (cssText) {var style = document. createElement ('style'), // create a style element head = document. head | document. getElementsByTagName ('head') [0]; // get the head element style. type = 'text/css '; // The type attribute of the style element must be set to text/css. Otherwise, if (style. styleSheet) {// IE var func = function () {try {// prevent the number of stylesheet in IE from exceeding the limit and the error style.styleSheet.css Text = cssText;} catch (e) {}}// if the current styleSheet cannot be used, put it in asynchronous mode and then line if (style. styleSheet. disabled) {setTimeout (func, 10) ;}else {func ();}} in the else {// w3c // w3c browser, you only need to 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 the head} // use addCSS ('# demo {height: 30px; background: # f00 ;}');

Of course, this is only the most basic demonstration method and needs to be improved in practical use. For example, you need to insert the css code generated each time into a style element, in this way, the number of stylesheet exceeds the limit.

Encapsulation:

Copy codeThe Code is as follows: var importStyle = function importStyle (B) {var a = document. createElement ("style"), c = document; c. getElementsByTagName ("head" has 02.16.appendchild(a%;if(a.stylesheet%a.stylesheet.css Text = B} else {. appendChild (c. createTextNode (B ))}};
ImportStyle ('h1 {background: red;} '); // call

Seajs Encapsulation

Copy codeThe Code is as follows: seajs. importStyle = function importStyle (B) {var a = document. createElement ("style"), c = document; c. getElementsByTagName ("head" has 02.16.appendchild(a%;if(a.stylesheet%a.stylesheet.css Text = B} else {. appendChild (c. createTextNode (B ))}};
Ii. javascript insert <link> Style
In

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

The above is all the content of this article, hoping to help you learn.

Articles you may be interested in:

• Javascript insert style implementation code
• JavaScript insert dynamic style implementation code
• ExtJS custom theme style details
• Summary of three methods for inserting css styles on the jsp page
• Js dynamically modifies the entire page style to achieve skin replacement effect
• Solution to js failure loss after jquery mobile page Jump
• Click the button to get the text content and change the js Implementation of the style
• How to modify, add, and delete class styles in js