Ich muss eine CSS-Stylesheet-Klasse dynamisch in JavaScript erstellen und sie einigen HTML-Elementen wie div, table, span, tr usw. und einigen Steuerelementen wie asp: Textbox, Dropdownlist und datalist zuweisen.
Ist es möglich?
Es wäre schön mit einer Probe.
javascript
css
stylesheet
Himadri
quelle
quelle
Antworten:
Obwohl ich nicht sicher bin, warum Sie CSS-Klassen mit JavaScript erstellen möchten, ist hier eine Option:
quelle
Es wurde eine bessere Lösung gefunden, die in allen Browsern funktioniert.
Verwendet document.styleSheet, um Regeln hinzuzufügen oder zu ersetzen. Die akzeptierte Antwort ist kurz und praktisch, funktioniert jedoch in IE8 und weniger.
Die Funktion wird wie folgt verwendet.
quelle
var styleSheetLength = styleSheet.cssRules ? styleSheet.cssRules.length : 0
und ihre Verwendung durch die Implementierung der Funktion zu ersetzen.Kurze Antwort, dies ist "auf allen Browsern" kompatibel (speziell IE8 / 7):
Und dieses letzte Bit wendet die Klasse auf ein Element an:
Hier ist auch eine kleine Testseite: https://gist.github.com/shadybones/9816763
Das Wichtigste ist die Tatsache, dass Stilelemente eine "styleSheet" / "sheet" -Eigenschaft haben, mit der Sie Regeln hinzufügen / entfernen können.
quelle
Es gibt ein leichtes jQuery-Plugin, mit dem CSS-Deklarationen generiert werden können: jQuery-injizierenCSS
Tatsächlich wird JSS (von JSON beschriebenes CSS) verwendet, aber es ist recht einfach zu handhaben, um dynamische CSS-Stylesheets zu generieren.
quelle
YUI hat mit Abstand das beste Stylesheet-Dienstprogramm, das ich je gesehen habe. Ich ermutige Sie, es auszuprobieren, aber hier ist ein Vorgeschmack:
Es gibt offensichtlich andere viel einfachere Möglichkeiten, Stile im laufenden Betrieb zu ändern, wie die hier vorgeschlagenen. Wenn sie für Ihr Problem sinnvoll sind, sind sie vielleicht am besten, aber es gibt definitiv Gründe, warum das Ändern von CSS eine bessere Lösung ist. Der offensichtlichste Fall ist, wenn Sie eine große Anzahl von Elementen ändern müssen. Der andere wichtige Fall ist, wenn Sie Ihre Stiländerungen benötigen, um die Kaskade einzubeziehen. Die Verwendung des Doms zum Ändern eines Elements hat immer eine höhere Priorität. Dies ist der Vorschlaghammer-Ansatz und entspricht der Verwendung des style-Attributs direkt für das HTML-Element. Das ist nicht immer der gewünschte Effekt.
quelle
Ab IE 9. Sie können jetzt eine Textdatei laden und eine style.innerHTML-Eigenschaft festlegen. Im Wesentlichen können Sie jetzt eine CSS-Datei über Ajax laden (und den Rückruf erhalten) und dann einfach den Text in einem Style-Tag wie diesem festlegen.
Dies funktioniert in anderen Browsern, nicht sicher, wie weit zurück. Aber solange Sie IE8 nicht unterstützen müssen, würde es funktionieren.
und dann können Sie es eine externe Datei wie die myCss.css ziehen lassen
quelle
Hier ist Vishwanaths Lösung, die mit Kommentaren leicht umgeschrieben wurde:
quelle
Ein interessantes Projekt, das Ihnen bei Ihrer Aufgabe helfen könnte, ist JSS .
Mit der JSS-Bibliothek können Sie mithilfe der
.attach()
Funktion in den DOM / Head-Bereich injizieren .Repl Online-Version zur Bewertung.
Weitere Informationen zu JSS .
Ein Beispiel:
quelle
Verwenden von Google Closure:
Sie können einfach das ccsom-Modul verwenden:
Der Javascript-Code versucht, browserübergreifend zu sein, wenn der CSS-Knoten in den Dokumentkopf eingefügt wird.
quelle
https://jsfiddle.net/xk6Ut/256/
Eine Option zum dynamischen Erstellen und Aktualisieren von CSS-Klassen in JavaScript:
Klasse aktualisieren können
..... .....
...
quelle
Durchgesehen durch die Antworten und das offensichtlichste und direkteste fehlt: Verwenden Sie
document.write()
, um einen Teil des CSS zu schreiben, den Sie benötigen.Hier ist ein Beispiel (siehe Codepen: http://codepen.io/ssh33/pen/zGjWga ):
quelle
quelle
Hier ist meine modulare Lösung:
Sie tun im Grunde überall in Ihrem Code :
addNewStyle('body', 'color: ' + color1);
, wocolor1
eine Variable definiert ist.Wenn Sie möchten , „post“ die aktuelle CSS - Datei Sie einfach tun
submitNewStyle()
,und dann können Sie noch mehr CSS später hinzufügen.
Wenn Sie es mit "Medienabfragen" hinzufügen möchten, haben Sie die Option.
Nach "Hinzufügen von NewStyles" verwenden Sie einfach
submitNewStyleWithMedia('min-width: 1280px');
.Es war ziemlich nützlich für meinen Anwendungsfall, da ich das CSS der öffentlichen (nicht meiner) Website gemäß der aktuellen Zeit geändert habe. Ich reiche eine CSS-Datei ein, bevor ich "aktive" Skripte verwende, und den Rest danach (lässt die Site vor dem Zugriff auf Elemente irgendwie so aussehen, wie sie sein sollte
querySelector
).quelle
Zum Nutzen der Suchenden; Wenn Sie jQuery verwenden, können Sie Folgendes tun:
Natürlich können Sie das innere CSS nach Belieben ändern.
Schätzen Sie, dass einige Leute reines JavaScript bevorzugen, aber es funktioniert und war ziemlich robust für das dynamische Schreiben / Überschreiben von Stilen.
quelle
Ich habe einige der Antworten hier durchgesehen und konnte nichts finden, das automatisch ein neues Stylesheet hinzufügt, wenn es keines gibt, und wenn nicht einfach ein vorhandenes ändert, das bereits den benötigten Stil enthält, habe ich eine neue Funktion erstellt ( sollte in allen Browsern funktionieren, obwohl nicht getestet, verwendet addRule und außerdem nur einfaches natives JavaScript, lassen Sie mich wissen, ob es funktioniert):
Fügen Sie dann einfach diese 2 Hilfsfunktionen entweder innerhalb der obigen Funktion oder irgendwo anders hinzu:
(Beachten Sie, dass ich in beiden Fällen eine for-Schleife anstelle von .filter verwende, da die CSS-Stil- / Regellistenklassen nur eine length-Eigenschaft und keine .filter-Methode haben.)
Dann um es zu nennen:
Lassen Sie mich wissen, ob es für Ihren Browser funktioniert oder einen Fehler gibt.
quelle