Bagaimanakah saya boleh menukar lebar secara dinamik a :before pseudo-element menggunakan jQuery?

Pengubahsuaian Lebar Dinamik bagi :before CSS Selectors dengan JQuery

Dalam pembangunan web, anda mungkin menghadapi senario di mana kandungan dinamik memerlukan pelarasan pada penggayaan unsur pseudo seperti :sebelum ini. Untuk mencapai ini dengan JQuery, pustaka javascript yang popular, ikuti langkah berikut:

Pertama, anggap peraturan CSS berikut:

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

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

Sekarang, untuk menetapkan sifat lebar pseudo :before -elemen menggunakan JQuery, anda boleh menambahkan elemen gaya baharu pada dokumen head:

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

Ini menambah peraturan CSS baharu yang mengatasi lebar awal設定。重要提示是使用 "!penting"来确保新规则优先於现有规则。

Untuk demonstrasi langsung, rujuk URL ini: [Pautan Demo Langsung]

Walaupun kaedah ini tidak khusus untuk :before-elemen, pseudo- ia membolehkan anda mengubah suai lebarnya atau CSS lain secara dinamik hartanah.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menukar lebar secara dinamik a :before pseudo-element menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!