Wie kann ich CSS-Pseudoelemente (wie ::before und ::after) mit JavaScript oder jQuery auswählen und bearbeiten?

Auswählen und Bearbeiten von CSS-Pseudoelementen mit JavaScript oder jQuery

Verwendung von CSS-Pseudoelementen wie ::before und ::after , kann Ihren Elementen zusätzlichen Stil verleihen, ohne dem DOM zusätzlichen Inhalt hinzuzufügen. Die Auswahl und Bearbeitung dieser Pseudoelemente kann jedoch eine Herausforderung sein.

Pseudoelemente mit jQuery auswählen

Mit jQuery können Sie Pseudoelemente mit derselben Syntax auswählen wie für reguläre Elemente. Um beispielsweise das ::after-Pseudoelement der .span-Klasse auszuwählen, würden Sie Folgendes verwenden:

$('span:after')

Um den „foo“-Inhalt in Ihrem Beispiel zu ändern, können Sie jQuery css() verwenden Methode:

$('span:after').css('content', 'bar');

Vanilla JS verwenden

Wenn Sie lieber Vanilla JS verwenden möchten, können Sie dies tun Wählen Sie außerdem Pseudoelemente mithilfe der Selektoren :before und :after aus. Sie erfordern jedoch eine komplexere Syntax als jQuery:

document.querySelector('.span::after')

Um den Inhalt zu ändern, können Sie die Eigenschaft style.content verwenden:

document.querySelector('.span::after').style.content = 'bar';

Pseudoelement manipulieren Inhalte mit jQuery

Ein anderer Ansatz besteht darin, Datenattribute zu verwenden, um den Pseudoelementinhalt zu speichern. In Ihrem HTML:

<span data-content="foo"></span>

In jQuery können Sie dann die Methode hover() verwenden, um den Inhalt beim Hover zu aktualisieren:

$('span').hover(function(){
    $(this).attr('data-content', 'bar');
});

In CSS können Sie die Methode attr( )-Funktion, um auf das Dateninhaltsattribut zuzugreifen und den Pseudoelementinhalt festzulegen:

span:after {
    content: attr(data-content);
}

Damit können Sie den Pseudoelementinhalt ändern, ohne zusätzliches Markup hinzuzufügen oder Überschreiben der vorhandenen CSS-Regeln.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Pseudoelemente (wie ::before und ::after) mit JavaScript oder jQuery auswählen und bearbeiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!