Recently, I was working on a project and needed JavaScript to dynamically insert styles, but the previous method failed! The reason I checked for 2 hours was that I was a slutty person. Let’s talk about this at the end!
JavaScript insertion style is widely used in front-end development, especially when modifying front-end performance and page skinning. The task I have done recently is that the user clicks a button on another site and inserts a script under another site page to execute it, which includes style insertion.
Generally speaking, there are two types of dynamic insertion styles for JavaScript. One is to introduce external styles into the page, use the <link> tag in <head> to introduce an external style file, and the other is to use the <style> tag to insert the page style in the page (the one mentioned here is not the style attribute).
1. Introduce external styles into the page:
Using the <link> tag in <head> to introduce an external style file, this is relatively simple, and there are no compatibility issues for each mainstream browser:
The code copy 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.VeVB.COM/home/css/reset.css?v=20101227");
However, in the project I am currently doing, there are very few styles applied by itself, and it seems inappropriate to directly introduce an external style file, so I chose the second solution, using the <style> tag to insert the page style in the page.
2. Use the <style> tag to insert page style:
This method has compatibility problems in various mainstream browsers. Standard browsers such as firefox cannot directly obtain the cssText value of the styleSheet. In standard browsers, they can only use document.styleSheets[0].cssRules[0].cssText to obtain the styles individually; at the same time, use: document.styleSheets[0].cssRules[0].cssText=newcssText; the page will not automatically update the style, and you must use: document.styleSheets[0].cssRules[0].style.cssText=newcssText; this does not seem to be humanized and simple to use. A good method is used in YUI: style.appendChild(document.createTextNode(styles)); use createTextNode to add style strings to the <style> tag;
The code copy 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 properties for ie here
/*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:#FFFFF }";
includeStyleElement(styles, "newstyle");
In this way, the elements in the page can be directly applied to the style, regardless of whether your elements are appended through the script.
About hand silly:
Look at this code:
The code copy is 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:#FFFFF }";
includeStyleElement(styles, "newstyle");
As mentioned earlier, this project is when a user clicks a button on another site and inserts a script under another site page to execute it. This includes style insertion. In order to ensure the uniqueness of the element ID I created as much as possible, I added "__" in front of the element ID to indicate that private protection against conflicts. As a result, the tragedy was caused. The naming of IE6, IE7 class and id could not start with underscore ("_"), and I actually forgot this! It took two hours to find out the reason. It's a tragedy! Draw a conclusion! Don’t be cheap when doing the front-end!