JavaScript dynamic referencing CSS files in 2 ways Introduction _ Basics

A recent project, you need JavaScript dynamic insert style, the result of the previous method is invalid! Check for 2 hours of reason unexpectedly is own hand cheap, this last say!

JavaScript insertion styles are widely used in front-end development, especially when it comes to modifying front-end performance and page skin changes. The most recent task was to click a button on someone else's site and insert a script under another Site page, which included a style insert.

In general, there are two types of javascript dynamic insert styles, one for the introduction of external styles in the page, one for introducing an external style file in

First, the introduction of external styles in the page:

Using <link> tags in

Copy Code 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 ("http://css.jb51.net/home/css/reset.css?v=20101227");

But in the project I am currently working on the application of very few styles, directly with the introduction of an external style file does not seem appropriate, so I chose the second option, in the page using <style> tags inserted page style.

Insert page style using <style> Tags:

This way in various mainstream browsers have compatibility problems, such as Firefox and other standard browsers can not directly get Set stylesheet Csstext value, standard browser can only use Document.stylesheets[0].cssrules[0]. Csstext a single fetch style; use: document.stylesheets[0].cssrules[0].csstext=newcsstext; pages do not automatically update styles, you must use: document.stylesheets [0].cssrules[0].style.csstext=newcsstext; This seems to be no pit Dad's ie to the humanization and simplicity. Yui used a very good way: Style.appendchild (document.createTextNode (styles)), using createTextNode to add style strings to <style> tags;

Copy Code code as follows:

function includestyleelement (styles, Styleid) {

if (document.getElementById (Styleid)) {
Return
}
var style = document.createelement ("style");
Style.id = Styleid;
It's better to set the following properties for IE
/*if (Isie ()) {
Style.type = "Text/css";
Style.media = "Screen"
}*/
(document.getElementsByTagName ("head") [0] | | document.body). appendchild (style);
if (style.stylesheet) {//for ie
Style.styleSheet.cssText = styles;
else {//for the Consortium
Style.appendchild (document.createTextNode (styles));
}
}
var styles = "#div {background-color: #FF3300; Color: #FFFFFF} ";
Includestyleelement (Styles, "NewStyle");

This way the elements in the page can be applied directly, regardless of whether or not your elements are appended by the script.

About Hand Base:

Look at this code:

Copy Code code as follows:

var divobj = document.createelement ("div");
Divobj.id = "__div";
divobj.innerhtml = "Test JS insert dom and style";
Document.body.appendChild (Divobj);

var styles = "#__div {background-color: #FF3300; Color: #FFFFFF} ";
Includestyleelement (Styles, "NewStyle");

This project is the user clicks a button on someone else's site, will insert a script under another Site page, execute, which contains the style of insertion, I in order to ensure as much as possible I created the element ID uniqueness, the hand base in the element ID before the "__", indicating private conflict prevention. As a result of tragedy, IE6,IE7 class and ID name can not be the beginning of the underscore ("_"), unexpectedly put this to forget! It took two hours to find out why. What a tragedy! Come to a conclusion! Do the front end must not hand cheap!