Vor kurzem habe ich an einem Projekt gearbeitet und JavaScript benötigt, um dynamisch Stile einzufügen, aber die vorherige Methode ist fehlgeschlagen! Der Grund, warum ich 2 Stunden lang überprüfte, war, dass ich eine versaute Person war. Lassen Sie uns am Ende darüber sprechen!
Der JavaScript-Insertionsstil wird in der Front-End-Entwicklung weit verbreitet, insbesondere bei der Änderung der Front-End-Leistung und des Seitenhäuses. Die Aufgabe, die ich kürzlich erledigt habe, ist, dass der Benutzer auf einer anderen Website auf eine Schaltfläche klickt und ein Skript auf einer anderen Site -Seite einfügt, um sie auszuführen.
Im Allgemeinen gibt es zwei Arten von dynamischen Einfügungsstilen für JavaScript. Einer besteht darin, externe Stile in die Seite einzuführen, das <Link> -Tag in <Head> zu verwenden, um eine externe Style -Datei einzuführen, und das andere besteht darin, das <style> -Tag zu verwenden, um den Seitenstil auf der Seite einzufügen (das hier erwähnte hier ist nicht das Style -Attribut).
1. Einführen externer Stile in die Seite:
Verwenden des <Link> -Tags in <Head>, um eine externe Style -Datei einzuführen. Dies ist relativ einfach und es gibt keine Kompatibilitätsprobleme für jeden Mainstream -Browser:
Die Codekopie 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.vevb.com/home/css/reset.css?v=20101227");
In dem Projekt, das ich derzeit mache, werden jedoch nur sehr wenige Stile für sich angewendet, und es erscheint unangemessen, eine externe Style -Datei direkt einzuführen. Daher habe ich die zweite Lösung ausgewählt, wobei ich das <style> -Tag verwendet habe, um den Seitenstil auf der Seite einzufügen.
2. Verwenden Sie das <style> -Tag, um den Seitenstil einzufügen:
Diese Methode hat Kompatibilitätsprobleme in verschiedenen Mainstream -Browsern. Standard -Browser wie Firefox können den CSSTEXT -Wert des Stylesheet nicht direkt erhalten. In Standard -Browsern können sie nur Dokument verwenden. Gleichzeitig verwenden Sie: Dokument.Stylheets [0] .cssrules [0] .csStext = newCStestext; Die Seite aktualisiert den Stil nicht automatisch und Sie müssen verwenden: document.stylesheets [0] .cssRules [0] .style.cStext = NewCSSTEXT; Dies scheint nicht humanisiert und einfach zu bedienen. Eine gute Methode wird in Yui verwendet: style.appendChild (document.CreateTextNode (styles)); Verwenden Sie CreateTeTeXTnode, um dem <Styles> -Tag aus Stilzuständen hinzuzufügen.
Die Codekopie lautet wie folgt:
FunktionseinschlusssileLement (Styles, StyleId) {
if (document.getElementById (styleId)) {
Zurückkehren
}
var style = document.createelement ("style");
style.id = styleId;
// Es ist am besten, die folgenden Eigenschaften für den IE hier festzulegen
/*if (isie ()) {
style.type = "text/css";
style.media = "Bildschirm"
}*/
(Document.GetElementsByTagName ("Kopf") [0] || document.body) .AppendChild (style);
if (style.stylesheet) {// für IE
style.Stylesheet.csStext = Styles;
} else {// für w3c
style.Appendchild (document.CreateTextNode (styles));
}
}
var styles = "#div {Hintergrund-Color:#ff3300; color: #fffff}";
Einschließung von StileLeLement (Styles, "Newstyle");
Auf diese Weise können die Elemente auf der Seite direkt auf den Stil angewendet werden, unabhängig davon, ob Ihre Elemente über das Skript angehängt werden.
Über Hand albern:
Schauen Sie sich diesen Code an:
Die Codekopie lautet wie folgt:
var divobj = document.createelement ("div");
divobj.id = "__div";
divobj.innerhtml = "testen js fix dom and style";
document.body.appendchild (Divobj);
var stiles = "#__ div {Hintergrund-Color:#ff3300; Farbe: #fffff}";
Einschließung von StileLeLement (Styles, "Newstyle");
Wie bereits erwähnt, ist dieses Projekt, wenn ein Benutzer auf einer anderen Website auf eine Schaltfläche klickt und ein Skript auf einer anderen Site -Seite einfügt, um es auszuführen. Dies beinhaltet das Einfügen von Stilen. Um die Einzigartigkeit der Element -ID zu gewährleisten, die ich so viel wie möglich erstellt habe, habe ich "__" vor der Element -ID hinzugefügt, um festzustellen, dass der private Schutz vor Konflikten. Infolgedessen wurde die Tragödie verursacht. Die Benennung von IE6, IE7 -Klasse und ID konnte nicht mit Undercore ("_") beginnen, und ich habe das tatsächlich vergessen! Es dauerte zwei Stunden, um den Grund herauszufinden. Es ist eine Tragödie! Zeichnen Sie eine Schlussfolgerung! Seien Sie nicht billig, wenn Sie das Front-End machen!