CSS dynamisch mit JavaScript anwenden

Question

Was ist eine gute Methode, um Stile dynamisch (d. H. Der Wert von Stilen wird zur Laufzeit erstellt) auf HTML-Elemente mit JavaScript anzuwenden?

Ich bin auf der Suche nach einer Möglichkeit, ein JavaScript-Widget (JS, CSS und Markup) in einer einzigen Komponente (im Grunde ein Objekt) zu packen. Die Idee wäre, dass die Komponente den Stil kapselt (so haben die Benutzer eine nette API, um sie zu modifizieren, anstatt einen enger gekoppelten Ansatz, CSS direkt zu modifizieren und Änderungen indirekt anzuwenden). Das Problem besteht darin, dass ein einzelner API-Aufruf Änderungen an mehreren Gestaltungselementen zur Folge haben könnte.

Die Art, wie ich es tun würde, ist das CSS zu konstruieren und setzen Sie die style attribute auf die richtigen Elemente (am wahrscheinlichsten mit der ID zu vermeiden, Änderungen in anderen Bereichen der Markup anwenden). Ist das eine gute Lösung? Gibt es einen besseren Weg, es zu tun?

Answer 1

Die Art, wie ich es tun würde, ist, das CSS zu konstruieren und das style-Attribut auf die richtigen Elemente zu setzen. Zum Beispiel:

var div = document.createElement('div'); 
div.setAttribute("style", "color: blue, margin-top:5px"); 
document.body.appendChild(div); 

Dieser Code wird ein neues div-Element mit dem Stil color: blue, margin-top:5px und hängen Sie ihn an der Seite erstellen.

Answer 2

JQuery Mit

Verwenden Sie die CSS (Funktion) Stil auf bestehende Elemente anzuwenden, wenn Sie ein Objekt enthält Arten passieren:

var styles = { 
    backgroundColor : "#ddd", 
    fontWeight: "" 
}; 
$("#myId").css(styles); 

Sie auch einen Stil zum Zeitpunkt anwenden können mit:

$("#myId").css("border-color", "#FFFFFF"); 

Vanil la JS:

var myDiv = document.getElementById("#myId"); 
myDiv.setAttribute("style", "border-color:#FFFFFF;"); 

Mit Css:

Sie können auch eine separate CSS-Datei verwenden, um die verschiedenen Stile enthalten, innerhalb von Klassen benötigt werden, und je nach Kontext hinzugefügt oder diese Klassen auf Ihre Elemente entfernen .

in Ihrem CSS-Datei können Sie Klassen wie

haben

.myClass { 
    background-color: red; 
} 

.myOtherClass { 
    background-color: blue; 
} 

Wieder jquery verwenden, um eine Klasse zu einem Element hinzuzufügen oder zu entfernen, können Sie

$("#myDiv").addClass('myClass'); 

oder

$("#myDiv").removeClass('myClass'); 

verwenden

Ich denke, das ist ein sauberer Weg, da es Ihren Stil von Ihrer Logik trennt. Wenn die Werte Ihres CSS jedoch davon abhängen, was vom Server zurückgegeben wird, kann es schwierig sein, diese Lösung anzuwenden.

Answer 3

Ich könnte Ihre Frage falsch interpretieren, aber es klingt wie Sie nach einem einfachen architektonischen Muster fragen. Sie möchten etwas, das es für jemanden, der Ihr Widget verwendet, einfacher macht, es in seine Spezifikationen zu ändern?

Wenn dies der Fall ist, dann kenne ich kein spezielles Muster, um dies ohne Verwendung von CSS zu tun.

Ich kann Ihnen sagen, dass die "Widgets", die ich am einfachsten gefunden habe, separate CSS-Dateien haben. Ich habe es ziemlich einfach gefunden, sie an meine Bedürfnisse anzupassen. Ich denke, das liegt daran, dass die Struktur der Verwendung von CSS mit HTML und Javascript bereits ein schönes, einfaches Muster ist. Ich weiß nicht, dass es etwas Besseres gibt, vor allem wenn man bedenkt, dass die HTML/CSS-Beziehung den Leuten schon sehr vertraut ist.