Bagaimanakah Saya Boleh Memilih dan Memanipulasi Unsur Pseudo CSS (seperti ::sebelum dan ::selepas) dengan JavaScript atau jQuery?

Memilih dan Memanipulasi Elemen Pseudo CSS dengan JavaScript atau jQuery

Menggunakan elemen pseudo CSS, seperti ::sebelum dan ::selepas , boleh menambah penggayaan tambahan pada elemen anda tanpa menambah kandungan tambahan pada DOM. Walau bagaimanapun, memilih dan memanipulasi elemen pseudo ini boleh menjadi mencabar.

Memilih Elemen Pseudo dengan jQuery

jQuery membolehkan anda memilih elemen pseudo menggunakan sintaks yang sama seperti untuk elemen biasa. Contohnya, untuk memilih ::after pseudo-element kelas .span, anda akan menggunakan:

$('span:after')

Untuk menukar kandungan 'foo' dalam contoh anda, anda boleh menggunakan jQuery css() kaedah:

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

Menggunakan Vanilla JS

Jika anda lebih suka gunakan vanila JS, anda juga boleh memilih pseudo-elemen menggunakan pemilih :before dan :after. Walau bagaimanapun, mereka memerlukan sintaks yang lebih kompleks daripada jQuery:

document.querySelector('.span::after')

Untuk mengubah suai kandungan, anda boleh menggunakan style.content property:

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

Memanipulasi Pseudo-Element Kandungan dengan jQuery

Pendekatan lain ialah menggunakan atribut data untuk menyimpan kandungan unsur pseudo. Dalam HTML anda:

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

Dalam jQuery, anda kemudian boleh menggunakan kaedah hover() untuk mengemas kini kandungan pada hover:

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

Dalam CSS, anda boleh menggunakan attr( ) untuk mengakses atribut kandungan data dan menetapkan kandungan unsur pseudo:

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

Ini membolehkan anda menukar kandungan unsur pseudo tanpa menambah penanda tambahan atau mengatasi peraturan CSS sedia ada.

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