Sie können eine Pseudoklasse nicht nur für ein bestimmtes Element formatieren, so wie Sie keine Pseudoklasse in einem Inline-Attribut style = "..." haben können (da es keinen Selektor gibt).
Sie können dies tun, indem Sie das Stylesheet ändern, indem Sie beispielsweise die Regel hinzufügen:
#elid:hover { background: red; }
Angenommen, jedes Element, das Sie beeinflussen möchten, verfügt über eine eindeutige ID, damit es ausgewählt werden kann.
Theoretisch lautet das gewünschte Dokument http://www.w3.org/TR/DOM-Level-2-Style/Overview.html. Dies bedeutet, dass Sie (bei einem bereits vorhandenen eingebetteten oder verknüpften Stylesheet) folgende Syntax verwenden können:
document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0);
document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';
IE erfordert natürlich eine eigene Syntax:
document.styleSheets[0].addRule('#elid:hover', 'background-color: red', 0);
document.styleSheets[0].rules[0].style.backgroundColor= 'red';
Ältere und kleinere Browser unterstützen wahrscheinlich keine der beiden Syntax. Dynamisches Stylesheet-Fummeln wird selten durchgeführt, da es ziemlich ärgerlich ist, es richtig zu machen, es wird selten benötigt und ist historisch problematisch.
function sameOrigin(url) { var loc = window.location, a = document.createElement('a'); a.href = url; return a.hostname === loc.hostname && a.port === loc.port && a.protocol === loc.protocol; }
Ich habe dafür eine kleine Bibliothek zusammengestellt, da ich glaube, dass es gültige Anwendungsfälle für die Bearbeitung von Stylesheets in JS gibt. Gründe dafür sind:
quelle
Eine Funktion, um mit dem Cross-Browser-Zeug fertig zu werden:
quelle
Platzieren Sie das CSS einfach in einer Vorlagenzeichenfolge.
Erstellen Sie dann ein Stilelement, platzieren Sie die Zeichenfolge im Stil-Tag und hängen Sie sie an das Dokument an.
Die Spezifität kümmert sich um den Rest. Anschließend können Sie Stil-Tags dynamisch entfernen und hinzufügen. Dies ist eine einfache Alternative zu Bibliotheken und zum Durcheinander mit dem Stylesheet-Array im DOM. Viel Spaß beim Codieren!
quelle
insertAdjacentElement
erfordert 2 Argumente in den Hauptbrowsern (Chrome, Firefox, Edge), von denen das erste die Position relativ zum Referenzelement festlegt ( siehe hier ). Ist das eine kürzliche Änderung? ('Beforeend' zur Antwort hinzugefügt).Mein Trick ist die Verwendung eines Attributselektors. Attribute lassen sich einfacher mit Javascript einrichten.
CSS
Javascript
html
quelle
Es gibt noch eine andere Alternative. Anstatt die Pseudoklassen direkt zu manipulieren, erstellen Sie echte Klassen, die dieselben Dinge modellieren, wie eine "Hover" -Klasse oder eine "besuchte" Klasse. Gestalten Sie die Klassen mit dem üblichen "." Syntax und dann können Sie JavaScript verwenden, um Klassen zu einem Element hinzuzufügen oder daraus zu entfernen, wenn das entsprechende Ereignis ausgelöst wird.
quelle
:before
&:after
sind Pseudoelemente , keine Klassen.Anstatt Pseudoklassenregeln direkt mit Javascript festzulegen, können Sie die Regeln in verschiedenen CSS-Dateien unterschiedlich festlegen und dann mit Javascript ein Stylesheet ausschalten und ein anderes einschalten. Eine Methode wird unter A List Apart beschrieben (siehe für weitere Einzelheiten).
Richten Sie die CSS-Dateien wie folgt ein:
Und dann mit Javascript zwischen ihnen wechseln:
quelle
Wie bereits erwähnt, wird dies von Browsern nicht unterstützt.
Wenn Sie die Stile nicht dynamisch erstellen (dh sie aus einer Datenbank oder etwas anderem ziehen), sollten Sie dies umgehen können, indem Sie dem Hauptteil der Seite eine Klasse hinzufügen.
Das CSS würde ungefähr so aussehen:
Und das Javascript, um dies zu ändern, wäre ungefähr so:
quelle
element.classList.add
nicht gut unterstützt? Ich sehe immer wieder Leuteelement.className +=
.Das Ein- und Ausschalten von Stylesheets ist der richtige Weg. Hier ist eine Bibliothek zum dynamischen Erstellen von Stylesheets, sodass Sie Stile im laufenden Betrieb festlegen können:
http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/
quelle
In jquery können Sie einfach Schwebepseudoklassen festlegen.
quelle
Hier ist eine Lösung mit zwei Funktionen: addCSSclass fügt dem Dokument eine neue CSS-Klasse hinzu, und toggleClass aktiviert sie
Das Beispiel zeigt das Hinzufügen einer benutzerdefinierten Bildlaufleiste zu einem div
quelle
Wenn Sie REACT verwenden, gibt es etwas, das Radium genannt wird . Es ist hier so nützlich:
quelle