Bagaimana untuk Melaraskan Lebar CSS `:before` secara Dinamik dengan jQuery?

Pelarasan Lebar Dinamik CSS :before Selectors Menggunakan jQuery

Objektif: Ubah suai sifat lebar elemen yang dihiasi dengan pemilih :before CSS, khususnya apabila ia mengikuti kelas tertentu nama.

Senario: Pertimbangkan CSS berikut:

.column:before {
    width: 300px;
    float: left;
    content: "";
    height: 430px;
}

.column {
    width: 500px;
    float: right;
    padding: 5px;
    overflow: hidden;
    text-align: justify;
}

Tugas: Ubah sifat lebar bagi pemilih :before yang dikaitkan dengan Kelas .column menggunakan jQuery, tanpa memberi kesan elemen tanpa :before peraturan.

Penyelesaian:

Seperti yang dinyatakan dalam jawapan yang diberikan, jQuery tidak menyokong pengubahsuaian langsung peraturan kelas pseudo. Walau bagaimanapun, anda boleh memintas pengehadan ini dengan menambahkan elemen gaya baharu secara dinamik pada kepala dokumen:

$('head').append('<style>.column:before {width: 800px !important;}</style>');

Ini memberikan lebar tetap 800px kepada pemilih :before dalam kelas .column. Ambil perhatian bahawa pengisytiharan !important mengatasi mana-mana gaya sedia ada.

Sebagai alternatif, anda boleh menggunakan pemalam yang direka khusus untuk mengubah suai peraturan kelas pseudo CSS. Walaupun pengesyoran pemalam tertentu tidak tersedia, carian web untuk "manipulasi kelas pseudo jQuery" harus menghasilkan hasil yang sesuai.

Atas ialah kandungan terperinci Bagaimana untuk Melaraskan Lebar CSS `:before` secara Dinamik dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!