Bagaimanakah saya Boleh Mengubah suai CSS :selepas Pseudo-elements Menggunakan jQuery?

Mengakses Pemilih CSS ":after" dengan jQuery

Elemen pseudo ":after" sering digunakan dalam CSS untuk menambah tambahan elemen visual kepada elemen HTML tertentu. Walau bagaimanapun, mengakses elemen pseudo ini dengan jQuery boleh mencabar kerana ia bukan sebahagian langsung daripada DOM.

Kaedah jQuery

Kod jQuery yang disediakan cuba mengubah suai lebar sempadan elemen ":selepas", tetapi ia tidak berfungsi kerana ":selepas" bukan pemilih CSS yang sah. Sebaliknya, jQuery boleh memanipulasi kelas elemen induk dan menogol kelas tambahan "diubah" untuk mengakses elemen ":selepas".

Kod CSS dan jQuery:

.pageMenu .active.changed::after { 
    border-top-width: 22px;
    border-left-width: 22px;
}

$('.pageMenu .active').toggleClass('changed');

Kod ini akan menambah kelas "diubah" pada item menu aktif, yang akan mencetuskan peraturan CSS tambahan yang digunakan pada ":selepas" pseudo-element untuk kelas "berubah".

Nota:

Walaupun penyelesaian di atas menyediakan penyelesaian, adalah penting untuk diingat bahawa ":after" pseudo-elements bukan sebahagian daripada DOM secara teknikal dan tidak boleh dimanipulasi secara langsung dengan JavaScript. Walau bagaimanapun, terdapat perpustakaan dan teknik yang tersedia untuk mengubah suai unsur pseudo secara tidak langsung. Rujuk kepada "Memanipulasi elemen pseudo CSS menggunakan jQuery (cth. :sebelum dan :selepas)" untuk mendapatkan maklumat lanjut tentang teknik ini.

Atas ialah kandungan terperinci Bagaimanakah saya Boleh Mengubah suai CSS :selepas Pseudo-elements Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!