Javascript insert style implementation code

Javascript insert styles are widely used in front-end development, especially when you modify the front-end performance and page skin replacement. Recently, When you click a button on another website, a script is inserted and executed on another website page, which includes style insertion.

In general, there are two types of javascript dynamic insertion styles. One is to introduce an external style to a page. in 1. introduce external styles to the page:
In Copy codeThe Code is as follows: function compute delinkstyle (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.jb51.net/home/css/reset.css? V= 20101227 ");

However, in my current project, there are very few styles applied. It seems inappropriate to introduce an external style file directly. Therefore, I chose the second solution, use the <style> label to insert a page style in the page.
Ii. Use the <style> label to insert a page style:
Use document.stylesheets%0%.cssrules%0%.css Text = newcssText; the style is not automatically updated on the page, and must be used: plain Text = newcssText; this does not seem to be user-friendly and easy for IE. YUI uses a good method: style. appendChild (document. createTextNode (styles); uses createTextNode to add the style string to the <style> label;Copy codeThe Code is as follows: function includeStyleElement (styles, styleId ){
If (document. getElementById (styleId )){
Return
}
Var style = document. createElement ("style ");
Style. id = styleId;
// Set the following attributes for Internet Explorer
/* If (isIE ()){
Style. type = "text/css ";
Style. media = "screen"
}*/
(Document. getElementsByTagName ("head") [0] | document. body). appendChild (style );
If (style. styleSheet) {// for ie
Style.styleSheet.css Text = styles;
} Else {// for w3c
Style. appendChild (document. createTextNode (styles ));
}
}
Var styles = "# div {background-color: # FF3300; color: # FFFFFF }";
IncludeStyleElement (styles, "newstyle ");

In this way, the elements on the page can apply the style directly, regardless of whether these elements are appended by scripts.
About handcuffs:
Read this Code:Copy codeThe Code is as follows: var divObj = document. createElement ("div ");
DivObj. id = "_ div ";
DivObj. innerHTML = "test js inserting DOM and Style ";
Document. body. appendChild (divObj );
Var styles = "#__ div {background-color: # FF3300; color: # FFFFFF }";
IncludeStyleElement (styles, "newstyle ");

As mentioned above, when a user clicks a button on another website, a script is inserted and executed on another website page, which includes style insertion, in order to ensure the uniqueness of the element id I created as much as possible, the operator adds "_" before the element ID to indicate private to prevent conflicts. The result is tragic. The names of IE6, IE7 class, and id cannot start with ("_"). I forgot this! It took two hours to find the cause. Tragedy! Draw a conclusion!