Bagaimana untuk Mengubah Suai Secara Dinamik CSS Width Property of :before Selector Menggunakan jQuery?

Ubahsuai Secara Dinamik Sifat Lebar CSS bagi :before Selector Menggunakan jQuery

Walaupun tidak mungkin untuk mengubah suai secara langsung sifat lebar bagi :before pemilih CSS menggunakan jQuery, penyelesaian wujud. Dengan menambahkan elemen gaya baharu secara dinamik pada kepala dokumen, anda boleh mencapai kesan yang diingini. Begini caranya:

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

Kod ini menambahkan elemen gaya baharu pada kepala dokumen. Peraturan CSS dalam elemen ini hanya menyasarkan pemilih :before dalam kelas .column, menetapkan sifat lebar kepada 800px dan mengatasi sebarang tetapan lebar sedia ada.

Contoh dan Demo

Pertimbangkan peraturan CSS berikut:

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

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

Untuk mengubah suai secara dinamik sifat lebar bagi :before untuk elemen kelas .column, tambahkan kod JavaScript berikut:

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

Ini akan memastikan bahawa hanya pemilih :before dalam elemen .column yang lebarnya diubah suai. Demo langsung penyelesaian ini tersedia [di sini](DEMO_URL).

Pemalam Alternatif

Walaupun kaedah di atas adalah penyelesaian yang mudah, anda juga boleh meneroka pemalam luaran yang menyediakan akses terus kepada peraturan pseudoclass. Walau bagaimanapun, menyelidik dan menguji pemalam sedemikian disyorkan sebelum menggunakannya dalam persekitaran langsung.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Suai Secara Dinamik CSS Width Property of :before Selector Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!