Mengapa WebKit Tidak Mengemas Kini Gaya Secara Automatik, dan Bagaimana Saya Boleh Mengecat Semula Secara Paksa?

Memaksa WebKit Mengemas kini Gaya

Anda menghadapi isu di mana perubahan gaya yang digunakan melalui JavaScript tidak disebarkan kepada semua elemen yang terjejas dalam Penyemak imbas berasaskan WebKit seperti Chrome dan Safari. Ini kadangkala boleh dilihat apabila berbilang elemen mewarisi gaya daripada nenek moyang yang sama dengan kanak-kanak yang mempunyai fokus atau mengandungi elemen interaktif seperti pautan.

Ketidak Responsif WebKit

WebKit tidak mengecat semula secara automatik apabila ia menerima kemas kini kepada gaya yang diwarisi. Ini berbeza dengan penyemak imbas lain seperti Firefox, Opera dan IE, yang mengendalikan perubahan ini dengan lebih lancar.

Memaksa Mengecat Semula Melalui Nudging

Memandangkan WebKit tidak mengemas kini gaya secara automatik, anda boleh mengecat semula secara paksa dengan membuat perubahan kecil pada mana-mana elemen pada halaman. Dalam Alat Pembangun Chrome, anda mendapati bahawa walaupun menyahtanda dan menyemak semula atribut unsur sewenang-wenangnya mencetuskan kemas kini gaya yang betul.

Penyelesaian Cadangan

Untuk memaksa mengecat semula secara pemprograman , anda boleh menggunakan teknik berikut:

sel.style.display = 'none';
sel.offsetHeight; // no need to store this anywhere, just referencing it is sufficient
sel.style.display = '';

Pendekatan ini melibatkan menyembunyikan sementara dan kemudian menyahsembunyikan unsur. Garis offsetHeight memastikan bahawa penyemak imbas benar-benar menggunakan perubahan. Anda tidak perlu menyimpan ketinggian yang dikembalikan.

Had Potensi

Penyelesaian yang disediakan disahkan berfungsi untuk elemen dengan paparan "blok". Ada kemungkinan ia mungkin menunjukkan gelagat berbeza untuk elemen dengan mod paparan lain, tetapi ini memerlukan penyiasatan lanjut.

Atas ialah kandungan terperinci Mengapa WebKit Tidak Mengemas Kini Gaya Secara Automatik, dan Bagaimana Saya Boleh Mengecat Semula Secara Paksa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!