Introduction to 2 methods of dynamically referencing CSS files in Javascript_Basic knowledge

I recently worked on a project that required JavaScript to dynamically insert styles, but the previous method failed! The reason why I checked for 2 hours turned out to be my poor hands. Let’s talk about this last!

Javascript insertion styles are widely used in front-end development, especially when modifying front-end performance and page skinning. The task I did recently was that when a user clicks a button on someone else's site, a script will be inserted and executed under the page of the other site. This includes the insertion of styles.

Generally, there are two types of JavaScript dynamic insertion styles. One is to introduce external styles into the page and use the tag in

to introduce an external style file. The other is to use tag inserts the page style (this is not the style attribute).

1. Introduce external styles into the page:

Use the tag in

to introduce an external style file. This is relatively simple, and there are no compatibility issues with major browsers:

Copy code The code is 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");

However, in the project I am currently working on, there are very few applied styles. It seems inappropriate to directly introduce an external style file, so I chose the second option, using the

2. Use the

This method has compatibility issues in various mainstream browsers. Standard browsers such as Firefox cannot directly obtain the cssText value for setting styleSheet. Under standard browsers, only document.styleSheets[0].cssRules[0] can be used. cssText obtains the style individually; use: document.styleSheets[0].cssRules[0].cssText=newcssText; the page will not automatically update the style, you must use: document.styleSheets[0].cssRules[0].style.cssText= newcssText; This seems not as user-friendly and simple as the cheating IE. A good method is used in YUI: style.appendChild(document.createTextNode(styles)); Use createTextNode to add the style string to the

Copy code The code is 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 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 w3c
style.appendChild(document.createTextNode(styles));
}
}
var styles = "#div{background-color: # FF3300; color:#FFFFFF }";
includeStyleElement(styles, "newstyle");

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

About Hands:

Look at this code:

Copy code The code is as follows:

var divObj = document.createElement("div");
divObj.id = "__div";
divObj.innerHTML = "Test js to insert DOM and style";
document.body.appendChild (divObj);

var styles = "#__div{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles, "newstyle");

As mentioned earlier, in this project, when a user clicks a button on someone else's site, a script will be inserted and executed under the page of the other site. This includes the insertion of styles. In order to ensure that I created it as much as possible The element ID is unique. You add "__" in front of the element ID to indicate privateness to prevent conflicts. The result is tragic. The names of IE6 and IE7 class and id cannot start with an underscore ("_"). I actually forgot this! It took two hours to find the reason. What a tragedy! Come to a conclusion! Don’t be cheap when doing front-end work!