Detailed explanation of the usage of Javascript to dynamically import styles and files from the outside

Javascript insertion styles are widely used in front-end development, especially when modifying front-end performance and page skinning.

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 Use the tag to insert page styles in the page (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 is widely used by all mainstream There is no compatibility issue with the browser:

function includeLinkStyle(url) { var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = url; document.getElementsByTagName("head")[0].appendChild(link); } Copy after login It seems inappropriate to directly introduce an external style file, so I chose the second option, using the tag to insert the page style in the page. .

##2. Use the tag to insert the page style:

This method has compatibility issues in various mainstream browsers, such as Standard browsers such as Firefox cannot directly obtain the cssText value of setting styleSheet. Under standard browsers, you can only use document.styleSheets[0].cssRules[0].cssText to obtain the style individually; at the same time, 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 tag; function includeStyleElement(styles, styleId) { if (document.getElementById(styleId)) { return } var style = document.createElement("style"); style.id = styleId; //这里最好给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"); Copy after login In this way, the elements in the page Styles can be applied directly, regardless of whether your elements are appended through scripts.