Bagaimanakah saya Boleh Mengubah suai CSS :selepas Pseudo-elemen dengan jQuery?

Memanipulasi Pseudo-Elements dengan jQuery: Mengakses Pemilih ":after"

Mengubah suai elemen pseudo CSS seperti ":after" boleh membentangkan cabaran dalam jQuery. Walaupun menukar sifatnya secara langsung tidak mungkin, pendekatan alternatif wujud.

Memahami Had

elemen ":after" bukan sebahagian daripada DOM standard, menjadikannya tidak boleh diakses oleh JavaScript. Oleh itu, cuba mengubah suai gaya mereka menggunakan pemilih seperti:

$('.pageMenu .active:after').css(...)

tidak akan berfungsi.

Penyelesaian Menggunakan Kelas Dinamik

Satu penyelesaian adalah dengan tambah kelas baharu secara dinamik dengan gaya yang diubah suai pada elemen. Contohnya:

CSS:

.pageMenu .active.changed:after { 
/* this selector is more specific, so it takes precedence over the other :after */
    border-top-width: 22px;
    border-left-width: 22px;
    border-right-width: 22px;
}

JS:

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

Kaedah ini menambah "diubah" kelas, yang menggantikan gaya ":selepas" asal dengan gaya yang diubah suai lebar.

Teknik Alternatif

Selain penyelesaian kelas dinamik, pelbagai teknik wujud untuk membaca atau mengubah suai gaya elemen pseudo menggunakan JavaScript. Rujuk:

"Memanipulasi elemen pseudo CSS menggunakan jQuery (cth. :sebelum dan :selepas)" untuk panduan yang komprehensif.

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