為什麼 WebKit 瀏覽器需要「推動」來傳播透過 JavaScript 所做的樣式變更？

WebKit 重繪神秘行為：解決樣式變更

在Web 開發領域，確保跨瀏覽器的外觀一致可能會帶來挑戰。當嘗試在基於 WebKit 的瀏覽器（例如​​ Chrome、Safari）中使用 JavaScript 應用程式樣式變更時，就會出現這樣的問題。

考慮以下 JavaScript 程式碼：

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

此程式碼旨在修改 ID 為「my_id」的元素的類別屬性。然而，在 WebKit 瀏覽器中，只有第一個受影響的後代同級元素會更新，而第二個則保持不變，即使它們是已修改元素的直接同級元素。

有趣的是，在 Chrome 的「開發人員工具」中，只需切換任何元素即可任何元素的屬性都會觸發第二個同級元素的正確呈現。這表明 WebKit 需要「推動」來傳播樣式變更。

簡單而有效的解決方案

在探索了各種無效的建議之後，一個簡單而優雅的解決方案出現在瓦西爾·丁科夫評論。若要在WebKit 中強制重繪，請執行下列指令：

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

此技術隱藏元素（「sel」），讀取其offsetHeight（非隱藏元素的非零屬性），然後取消隱藏元素。這種微妙的操作會觸發重繪，傳播預期的樣式變更。

其他注意事項

此解決方案是否適用於「區塊」以外的樣式變更還有待測試財產。不過，對於筆者的情況來說，卻提供了一個直接有效的解決方案。透過消除樣式傳播中的不一致，它確保了基於 WebKit 的瀏覽器之間視覺上一致的網頁。

以上是為什麼 WebKit 瀏覽器需要「推動」來傳播透過 JavaScript 所做的樣式變更？的詳細內容。更多資訊請關注PHP中文網其他相關文章！