Wie kann ich CSS nach Pseudoelementen mit jQuery ändern?

Zugriff auf den CSS-Selektor „:after“ mit jQuery

Das Pseudoelement „:after“ wird in CSS häufig verwendet, um zusätzliche Elemente hinzuzufügen visuelle Elemente zu einem bestimmten HTML-Element hinzufügen. Der Zugriff auf dieses Pseudoelement mit jQuery kann jedoch eine Herausforderung sein, da es nicht direkt Teil des DOM ist.

jQuery-Methode

Der bereitgestellte jQuery-Code versucht, das zu ändern Rahmenbreite des „:after“-Elements, aber es funktioniert nicht, weil „:after“ kein gültiger CSS-Selektor ist. Stattdessen kann jQuery die Klasse des übergeordneten Elements manipulieren und eine zusätzliche „geänderte“ Klasse umschalten, um auf das „:after“-Element zuzugreifen.

CSS- und jQuery-Code:

.pageMenu .active.changed::after { 
    border-top-width: 22px;
    border-left-width: 22px;
}

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

Dieser Code fügt dem aktiven Menüelement eine „geänderte“ Klasse hinzu, die die zusätzlichen CSS-Regeln auslöst, die auf das Pseudoelement „:after“ für das angewendet werden „geänderte“ Klasse.

Hinweis:

Während die obige Lösung eine Problemumgehung darstellt, ist es wichtig zu bedenken, dass „:after“-Pseudoelemente technisch gesehen kein Teil davon sind Das DOM und kann nicht direkt mit JavaScript manipuliert werden. Es stehen jedoch Bibliotheken und Techniken zur indirekten Änderung von Pseudoelementen zur Verfügung. Weitere Informationen zu diesen Techniken finden Sie unter „CSS-Pseudoelemente mit jQuery bearbeiten (z. B. :before und :after)“.

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