Bagaimanakah Saya Boleh Mengubah Kandungan Unsur Pseudo CSS Secara Dinamik dengan JavaScript atau jQuery?

Memanipulasi Unsur Pseudo CSS dengan JavaScript dan jQuery

Keupayaan untuk mengubah suai kandungan unsur pseudo CSS secara dinamik (mis., :: sebelum, ::selepas) menggunakan JavaScript atau jQuery boleh menjadi sangat berguna.

Penyelesaian jQuery

Untuk menukar kandungan unsur pseudo menggunakan jQuery, anda boleh menggunakan langkah berikut:

1. Pilih elemen yang mana elemen pseudo dilampirkan.
2. Gunakan :selepas atau :sebelum pemilih untuk menyasarkan elemen pseudo.
3. Tetapkan sifat kandungan kepada nilai yang diingini.

Contohnya, untuk mengubah suai elemen pseudo ::selepas dengan kandungan 'foo ' untuk memaparkan 'bar':

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

JavaScript Vanila Penyelesaian

Dalam JavaScript vanila, anda boleh memanipulasi elemen pseudo menggunakan kaedah window.getComputedStyle() dan pemilih ::after atau ::before dilampirkan pada sifat gaya elemen.

Sebagai contoh, untuk mencapai hasil yang sama seperti contoh jQuery di atas:

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

Pendekatan Alternatif Menggunakan Atribut Data

Pendekatan alternatif ialah menggunakan atribut data untuk menyimpan kandungan yang dikehendaki dan kemudian menggunakan jQuery untuk mengubah suainya secara dinamik.

Sebagai contoh, tambahkan atribut data pada rentang elemen:

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

Kemudian, dalam jQuery, tetapkan attr() elemen pseudo untuk memanipulasi kandungannya:

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

Dalam CSS, takrifkan elemen pseudo dengan elemen kandungan yang datang daripada atribut data:

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Kandungan Unsur Pseudo CSS Secara Dinamik dengan JavaScript atau jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!