Introduction to two methods for Javascript dynamic reference of CSS files, javascriptcss

Introduction to two methods for Javascript dynamic reference of CSS files, javascriptcss

A recent project requires javascript dynamic insertion styles, and the previous method becomes invalid! The reason why I checked it for two hours was that I had my own bid. Let's talk about it later!

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 the Code as follows:

 

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("");

　　

 

 

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 the Code as follows:

 

Function includeStyleElement (styles, styleId) {if (document. getElementById (styleId) {return} var style = document. createElement ("style"); style. id = styleId; // it is best to set the following attributes for iehere/* 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 {color: # FFFFFF}"; includeStyleElement (styles, "newstyle ");

　　

 

 

In this way, the elements on the page can be directly applied to the css style, regardless of whether these elements are appended through scripts.

About handcuffs:

Read this Code:

 

Copy the Code 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 {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! Do not cool on front-end code!