Bagaimanakah Saya Boleh Memilih dan Memanipulasi elemen Pseudo CSS (::sebelum, ::selepas) dengan JavaScript/jQuery?

Memilih dan Memanipulasi Elemen Pseudo CSS dengan JavaScript/jQuery

Untuk memilih dan memanipulasi elemen pseudo CSS seperti ::sebelum dan ::selepas menggunakan JavaScript atau jQuery, anda boleh menggunakan beberapa teknik yang berbeza.

Memanipulasi Kandungan Menggunakan jQuery

jQuery membenarkan anda mendapatkan semula dan memanipulasi kandungan unsur pseudo seperti ini:

// Get the content of ::after for an element with class "span"
var content = $('.span::after').text();

Untuk menukar kandungan, hanya tetapkan nilai baharu:

// Change the content of ::after for elements with class "span"
$('.span::after').text('bar');

Memanipulasi Kandungan dengan Data Atribut

Sebagai alternatif, anda boleh menghantar kandungan kepada elemen pseudo menggunakan atribut data dan jQuery:

<!-- Element with a data attribute -->
<span data-content="foo">foo</span>

// Get the content from the data attribute
var content = $('span').attr('data-content');

// Manipulate the pseudo-element content
$('.span::after').text(content);

Untuk menukar kandungan pada tuding, anda boleh menggabungkan pendekatan ini dengan pengendali acara:

$('span').hover(function() {
  // Change the content of ::after on hover
  $(this).attr('data-content', 'bar');
});

span::after {
  content: attr(data-content) /* Combine this with seucolega's solution */ ' any other text you may want';
}

Dengan menggunakan teknik ini, anda boleh secara dinamik mengawal kandungan dan penampilan elemen pseudo dalam aplikasi web anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memilih dan Memanipulasi elemen Pseudo CSS (::sebelum, ::selepas) dengan JavaScript/jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!