Wie kann ich CSS ändern: nach Pseudoelementen mit jQuery?

Manipulation von Pseudoelementen mit jQuery: Zugriff auf den „:after“-Selektor

Das Ändern von CSS-Pseudoelementen wie „:after“ kann aktuelle Herausforderungen in jQuery. Obwohl eine direkte Änderung ihrer Eigenschaften nicht möglich ist, gibt es alternative Ansätze.

Einschränkungen verstehen

„:after“-Elemente sind nicht Teil des Standard-DOM und daher nicht zugänglich durch JavaScript. Daher wird der Versuch, ihre Stile mithilfe von Selektoren wie:

$('.pageMenu .active:after').css(...)

zu ändern, nicht funktionieren.

Problemumgehung mithilfe dynamischer Klassen

Eine Problemumgehung besteht darin Fügen Sie dem Element dynamisch eine neue Klasse mit geänderten Stilen hinzu. Zum Beispiel:

CSS:

.pageMenu .active.changed:after { 
/* this selector is more specific, so it takes precedence over the other :after */
    border-top-width: 22px;
    border-left-width: 22px;
    border-right-width: 22px;
}

JS:

$('.pageMenu .active').toggleClass('changed');

Diese Methode fügt das „geänderte“ Klasse, die die ursprünglichen „:after“-Stile mit den geänderten überschreibt Breiten.

Alternative Techniken

Zusätzlich zur Problemumgehung für dynamische Klassen gibt es verschiedene Techniken, um Pseudoelementstile mithilfe von JavaScript zu lesen oder zu ändern. Eine umfassende Anleitung finden Sie unter:

„CSS-Pseudoelemente mit jQuery bearbeiten (z. B. :before und :after)“.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS ändern: nach Pseudoelementen mit jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!