Wie kann ich CSS-Pseudoelementinhalte mit JavaScript oder jQuery dynamisch ändern?

Manipulation von CSS-Pseudoelementen mit JavaScript und jQuery

Die Möglichkeit, den Inhalt von CSS-Pseudoelementen dynamisch zu ändern (z. B. :: vorher, ::nachher) mit JavaScript oder jQuery kann sehr nützlich sein.

jQuery Lösung

Um den Inhalt eines Pseudoelements mithilfe von jQuery zu ändern, können Sie die folgenden Schritte ausführen:

1. Wählen Sie das Element aus, an das das Pseudoelement angehängt ist.
2. Verwenden Sie den :after- oder :before-Selektor, um das Pseudoelement anzusprechen.
3. Setzen Sie die Inhaltseigenschaft auf den gewünschten Wert value.

Um beispielsweise das ::after-Pseudoelement mit dem Inhalt „foo“ so zu ändern, dass „bar“ angezeigt wird:

$('span').find(':after').text('bar');

Vanilla JavaScript Solution

In Vanilla JavaScript können Sie Pseudoelemente mit der Methode window.getComputedStyle() und dem angehängten Selektor ::after oder ::before manipulieren auf die Stileigenschaft des Elements.

Um beispielsweise das gleiche Ergebnis wie im obigen jQuery-Beispiel zu erzielen:

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

Alternativer Ansatz unter Verwendung von Datenattributen

Ein alternativer Ansatz besteht darin, Datenattribute zu verwenden, um den gewünschten Inhalt zu speichern und ihn dann mit jQuery dynamisch zu ändern.

Für Fügen Sie beispielsweise dem Span-Element ein Datenattribut hinzu:

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

Setzen Sie dann in jQuery das attr() des Pseudoelements ein, um dessen Inhalt zu manipulieren:

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

In CSS, definieren Sie das Pseudoelement, dessen Inhalt aus dem Datenattribut stammt:

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

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