Detaillierte Erläuterung der Verwendung von Javascript zur dynamischen Einführung von Stilen und Dateien von außen

Javascript-Einfügungsstile werden häufig in der Front-End-Entwicklung verwendet, insbesondere wenn die Front-End-Leistung und das Skinning von Seiten geändert werden.

Im Allgemeinen gibt es zwei Arten von dynamischen Einfügungsstilen in JavaScript. Einer besteht darin, externe Stile in die Seite einzuführen und das 2cdf5bf648cf2f33323966d7f58a7f3f-Tag in 93f0f5c25f18dab9d176bd4f6de5d30e zu verwenden. Die andere Möglichkeit besteht darin, das Tag c9ccee2e6ea535a969eb3f532ad9fe89 zu verwenden, um Seitenstile in die Seite einzufügen (dies ist nicht das Stilattribut).

1. Fügen Sie externe Stile in die Seite ein:

Verwenden Sie das 2cdf5bf648cf2f33323966d7f58a7f3f-Tag, um eine externe Stildatei einzuführen und ist bei allen Mainstream-Nutzern beliebt. Es gibt keine Kompatibilitätsprobleme mit Browsern:

function includeLinkStyle(url) {
 var link = document.createElement("link");
 link.rel = "stylesheet";
 link.type = "text/css";
 link.href = url;
 document.getElementsByTagName("head")[0].appendChild(link);
}

Es scheint unangemessen, eine externe Stildatei direkt einzuführen, also habe ich die zweite Option gewählt und sie mit in die Seite eingefügt das c9ccee2e6ea535a969eb3f532ad9fe89-Tag.

2. Verwenden Sie das c9ccee2e6ea535a969eb3f532ad9fe89-Tag, um den Seitenstil einzufügen:

Diese Methode weist Kompatibilitätsprobleme in verschiedenen Mainstream-Browsern auf, z Standardbrowser wie Firefox können den CSSText-Wert der Einstellung styleSheet nicht direkt abrufen. Unter Standardbrowsern können Sie den Stil nur einzeln abrufen, indem Sie document.styleSheets[0].cssRules[0].cssText verwenden .styleSheets[0].cssRules[ 0].cssText=newcssText; Die Seite aktualisiert den Stil nicht automatisch. Sie müssen Folgendes verwenden: document.styleSheets[0].cssRules[0].style.cssText=newcssText; Benutzerfreundlich und einfach wie der Cheat-IE. Eine gute Methode wird in YUI verwendet: style.appendChild(document.createTextNode(styles)); Verwenden Sie createTextNode, um die Stilzeichenfolge zum c9ccee2e6ea535a969eb3f532ad9fe89 in dieser Seite hinzuzufügen direkt auf Elemente angewendet, unabhängig davon, ob Ihre Elemente über Skripte angehängt werden.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Javascript zur dynamischen Einführung von Stilen und Dateien von außen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!