Können JavaScript und jQuery CSS-Pseudoelemente wie ::before und ::after manipulieren?

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

Können CSS-Pseudoelemente wie ::before und ::after (beide alte und neue Versionen) mit jQuery ausgewählt und manipuliert werden?

Mit jQuery .css() Methode

Angenommen, die folgende CSS-Regel im Stylesheet:

.span::after { content: 'foo'; }

Um „foo“ mit Vanilla JavaScript oder jQuery in „bar“ zu ändern, können Sie verwenden die .css()-Methode.

Vanilla JavaScript:

const element = document.querySelector('.span');
element.style.content = 'bar';

jQuery:

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

Verwenden von Datenattributen

Eine andere Methode beinhaltet die Übergabe den Inhalt mithilfe eines Datenattributs dem Pseudoelement zuzuordnen und es damit zu manipulieren jQuery.

In HTML:

<span>foo</span>

In jQuery:

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

In CSS:

span:after {
  content: attr(data-content) ' any other text you may want';
}

Um zu verhindern, dass der zusätzliche Text angezeigt wird, seucolega's Lösung kann mit diesem Ansatz kombiniert werden.

In HTML:

<span>foo</span>

In jQuery:

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

In CSS:

span.change:after {
  content: attr(data-content) ' any other text you may want';
}

Diese Methoden bieten Flexibilität bei der Auswahl und Änderung den Inhalt von CSS-Pseudoelementen mit JavaScript oder jQuery.

Das obige ist der detaillierte Inhalt vonKönnen JavaScript und jQuery CSS-Pseudoelemente wie ::before und ::after manipulieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!