Bagaimana untuk Mengatasi Peraturan Gaya !penting dalam JavaScript?

Mengatasi Peraturan Gaya !penting dalam JavaScript

Apabila cuba mengubah suai penampilan elemen HTML, anda mungkin menghadapi pengisytiharan !penting CSS yang kelihatan menghalang penggantian daripada JavaScript . Ini boleh mengecewakan, tetapi adalah mungkin untuk memintas peraturan penting ini.

Menggunakan Atribut Sebaris

Satu kaedah adalah untuk menetapkan atribut 'gaya' terus kepada unsur. Atribut gaya ini harus termasuk sifat dan nilai yang diingini. Dengan menambahkan !important pada nilai, anda boleh mengatasi pengisytiharan !important luaran.

element.setAttribute('style', 'display:inline !important');

Mengubah suai Sifat Teks CSS

Sebagai alternatif, anda boleh mengubah suai gaya elemen harta 'cssText' objek. Sifat ini mengandungi keseluruhan kod CSS elemen. Dengan memberikan kod CSS baharu pada sifat ini, anda boleh mengatasi gaya sedia ada, termasuk sebarang peraturan penting.

element.style.cssText = 'display:inline !important';

Menggunakan Pemalam jQuery

Untuk memudahkan penyelesaian, anda boleh menggunakan pemalam jQuery saya yang dipanggil "penting" tersedia di GitHub. Pemalam ini menyediakan fungsi tambahan untuk memanipulasi !aturan penting dalam elemen.

Kaedah setProperty

Selain itu, CSSOM (Model Objek CSS) menawarkan kaedah yang dipanggil 'setProperty' yang membenarkan anda untuk menetapkan sifat CSS dengan keutamaan tertentu. Anda boleh menggunakan kaedah ini untuk mengatasi !aturan penting.

element.style.setProperty('background-color', 'red', 'important');

Dengan menggunakan mana-mana kaedah ini, anda boleh berjaya mengatasi peraturan gaya !penting menggunakan JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk Mengatasi Peraturan Gaya !penting dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!