Einführung in 2 Methoden zur dynamischen Referenzierung von CSS-Dateien in Javascript_Grundkenntnisse

Ich habe kürzlich an einem Projekt gearbeitet, das JavaScript zum dynamischen Einfügen von Stilen erforderte, aber die vorherige Methode ist fehlgeschlagen! Der Grund, warum ich zwei Stunden lang nachgesehen habe, waren meine schlechten Hände. Reden wir zuletzt darüber!

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. Die Aufgabe, die ich kürzlich erledigt habe, bestand darin, dass ein Skript unter der Seite der anderen Site eingefügt und ausgeführt wird, wenn ein Benutzer auf eine Schaltfläche klickt. Dazu gehört auch das Einfügen von Stilen.

Im Allgemeinen gibt es zwei Arten von dynamischen Einfügungsstilen in JavaScript. Der eine besteht darin, externe Stile in die Seite einzuführen und den -Tag zu verwenden ; Das style>-Tag fügt den Seitenstil ein (dies ist nicht das style-Attribut).

1. Externe Stile in die Seite einführen:

Verwenden Sie das Tag in

. Dies ist relativ einfach und es gibt keine Kompatibilitätsprobleme mit den wichtigsten Browsern:

Code kopieren Der Code lautet wie folgt:

Funktion 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");

In dem Projekt, an dem ich gerade arbeite, gibt es jedoch nur sehr wenige angewendete Stile. Es scheint unangemessen, eine externe Stildatei einzuführen, daher habe ich die zweite Option gewählt und das

2. Verwenden Sie das Tag

Bei dieser Methode gibt es Kompatibilitätsprobleme in verschiedenen Standardbrowsern wie Firefox. Unter Standardbrowsern kann nur document.styleSheets[0].cssRules[0] verwendet werden den Stil einzeln; verwenden Sie: document.styleSheets[0].cssRules[0].cssText=newcssText; die Seite aktualisiert den Stil nicht automatisch, Sie müssen verwenden: document.styleSheets[0].cssRules[0].style.cssText = newcssText; Dies scheint nicht so benutzerfreundlich und einfach zu sein wie der betrügerische IE. Eine gute Methode wird in YUI verwendet: style.appendChild(document.createTextNode(styles)); Verwenden Sie createTextNode, um die Stilzeichenfolge zum

Code kopieren Der Code lautet wie folgt:

Funktion includeStyleElement(styles, styleId) {

if (document.getElementById(styleId)) {

return
}
var style = document.createElement("style");
style.id = styleId;
// Hier ist es am besten, die folgenden Attribute festzulegen, z. B.
/*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 style = "#div{background-color : # FF3300; color:#FFFFFF }";
includeStyleElement(styles, "newstyle");

Auf diese Weise können Stile direkt auf Elemente auf der Seite angewendet werden, unabhängig davon, ob Ihre Elemente über Skripte angehängt werden.

Über Hände:

Sehen Sie sich diesen Code an:

Code kopieren Der Code lautet wie folgt:

var divObj = document.createElement("div");

divObj.id = "__div";
divObj.innerHTML = "Testen Sie js, um DOM und Stil einzufügen";
document.body. appendChild (divObj);

var style = "#__div{background-color: #FF3300; color:#FFFFFF }";

includeStyleElement(styles, "newstyle");

Wie bereits erwähnt, wird bei diesem Projekt ein Skript unter der Seite der anderen Site eingefügt und ausgeführt, um sicherzustellen, dass ich es erstellt habe Es ist so weit wie möglich, dass die Element-ID eindeutig ist. Sie fügen „__“ vor der Element-ID hinzu, um die Privatsphäre anzuzeigen und Konflikte zu vermeiden. Das Ergebnis ist tragisch. Die Namen der IE6- und IE7-Klasse und -ID dürfen nicht mit einem Unterstrich („_“) beginnen. Es dauerte zwei Stunden, den Grund zu finden. Was für eine Tragödie! Kommen Sie zu einem Schluss! Seien Sie nicht geizig, wenn Sie Front-End-Arbeiten erledigen!