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 2cdf5bf648cf2f33323966d7f58a7f3f tag in 93f0f5c25f18dab9d176bd4f6de5d30e to introduce an external style file. The other is Use the c9ccee2e6ea535a969eb3f532ad9fe89 tag to insert page styles in the page (this is not the style attribute).

1. Introduce external styles into the page:

Use the 2cdf5bf648cf2f33323966d7f58a7f3f tag in 93f0f5c25f18dab9d176bd4f6de5d30e 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);
}

It seems inappropriate to directly introduce an external style file, so I chose the second option, using the c9ccee2e6ea535a969eb3f532ad9fe89 tag to insert the page style in the page. .

##2. Use the c9ccee2e6ea535a969eb3f532ad9fe89 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 c9ccee2e6ea535a969eb3f532ad9fe89 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");

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

The above is the detailed content of Detailed explanation of the usage of Javascript to dynamically import styles and files from the outside. For more information, please follow other related articles on the PHP Chinese website!