如何強制 WebKit 重畫以確保樣式傳播到後代元素？

強制WebKit 重新繪製以進行樣式傳播

在實作JavaScript 樣式變更時，Web 開發人員可能會遇到瀏覽器之間的不一致問題。在 Chrome 和 Safari 等基於 WebKit 的瀏覽器中，對元素類別名稱的簡單更新可能無法傳播到後代。

更新同級時會出現此問題，第一個同級接收新樣式，但第二個不受影響。受影響元素中焦點和錨標記的存在使情況更加複雜。

解決方法：使用顯示切換觸發重畫

要在WebKit 中解決此問題，簡單而有效的解決方法是切換受影響元素的顯示屬性：

sel.style.display = 'none';
sel.offsetHeight; // Accessing offsetHeight forces a reflow
sel.style.display = '';

這會觸發重繪或重繪操作，將樣式變更傳播到所有後代。值得注意的是，該技術已被證實適用於區塊級元素，其對於其他顯示類型的功效可能需要進一步探索。

以上是如何強制 WebKit 重畫以確保樣式傳播到後代元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！