Bolehkah JavaScript dan jQuery Memanipulasi elemen Pseudo CSS seperti ::before dan ::after?

Memilih dan Memanipulasi Elemen Pseudo CSS Menggunakan JavaScript dan jQuery

Bolehkah elemen pseudo CSS seperti ::before dan ::after (kedua-duanya versi lama dan baharu) dipilih dan dimanipulasi menggunakan jQuery?

Menggunakan Kaedah .css() jQuery

Dengan mengandaikan peraturan CSS berikut dalam lembaran gaya:

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

Untuk menukar 'foo' untuk 'bar' menggunakan JavaScript atau jQuery vanila, anda boleh menggunakan .css() kaedah.

Vanila JavaScript:

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

jQuery:

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

Menggunakan Atribut Data

Kaedah lain melibatkan penghantaran kandungan ke elemen pseudo menggunakan atribut data dan memanipulasinya dengan jQuery.

Dalam HTML:

<span>foo</span>

Dalam jQuery:

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

Dalam CSS:

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

Untuk mengelakkan teks tambahan daripada dipaparkan, penyelesaian seucolega boleh digabungkan dengan pendekatan ini.

Dalam HTML:

<span>foo</span>

Dalam jQuery:

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

Dalam CSS:

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

Kaedah ini memberikan fleksibiliti dalam memilih dan mengubah suai kandungan unsur pseudo CSS menggunakan sama ada JavaScript atau jQuery.

Atas ialah kandungan terperinci Bolehkah JavaScript dan jQuery Memanipulasi elemen Pseudo CSS seperti ::before dan ::after?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!