Mengapa Pelayar WebKit Memerlukan 'Nudge' untuk Menyebarkan Perubahan Gaya yang Dibuat melalui JavaScript?

WebKit Lukis Semula Gelagat Enigmatik: Menyelesaikan Perubahan Gaya

Dalam bidang pembangunan web, memastikan penampilan yang konsisten merentas penyemak imbas boleh menimbulkan cabaran. Satu isu sedemikian timbul apabila cuba menggunakan perubahan gaya menggunakan JavaScript dalam penyemak imbas berasaskan WebKit (cth., Chrome, Safari).

Pertimbangkan kod JavaScript berikut:

sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;

Kod ini bertujuan untuk ubah suai atribut kelas elemen dengan ID "my_id". Walau bagaimanapun, dalam penyemak imbas WebKit, hanya unsur adik beradik keturunan pertama yang terjejas sahaja yang mengemas kini, manakala yang kedua kekal tidak berubah, walaupun mereka adalah adik beradik terdekat kepada elemen yang diubah suai.

Menariknya, dalam "Alat Pembangun" Chrome, hanya menogol mana-mana atribut mana-mana elemen mencetuskan pemaparan betul bagi adik-beradik kedua. Ini menunjukkan bahawa WebKit memerlukan "dorongan" untuk menyebarkan perubahan gaya.

Penyelesaian Trivial Namun Berkesan

Selepas meneroka pelbagai cadangan yang tidak berkesan, penyelesaian yang ringkas dan elegan muncul dalam komen oleh Vasil Dinkov. Untuk mengecat semula secara paksa dalam WebKit, laksanakan perkara berikut:

sel.style.display='none';
sel.offsetHeight; // Reference is sufficient, no need to store the value
sel.style.display='';

Teknik ini menyembunyikan elemen ("sel"), membaca offsetHeightnya (sifat bukan sifar untuk elemen tidak tersembunyi), dan kemudian menyahsembunyikan unsur tersebut. Manipulasi halus ini mencetuskan lukisan semula, menyebarkan perubahan gaya yang dimaksudkan.

Pertimbangan Tambahan

Ia masih perlu diuji sama ada penyelesaian ini terpakai pada perubahan gaya di luar "blok" harta benda. Walau bagaimanapun, untuk situasi penulis, ia memberikan penyelesaian yang mudah dan berkesan. Dengan menghapuskan ketidakkonsistenan dalam penyebaran gaya, ia memastikan halaman web yang konsisten secara visual merentas pelayar berasaskan WebKit.

Atas ialah kandungan terperinci Mengapa Pelayar WebKit Memerlukan 'Nudge' untuk Menyebarkan Perubahan Gaya yang Dibuat melalui JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!