為什麼 WebKit 不自動更新樣式，如何強制重繪？

強制WebKit 更新樣式

您遇到一個問題，即透過JavaScript 應用的樣式變更不會傳播到基於WebKit 的瀏覽器，例如Chrome 和Safari。當多個元素從具有焦點或包含互動元素（例如連結）的子元素繼承樣式時，有時會發生這種情況。

WebKit 的無回應

WebKit 不回應當它收到繼承樣式的更新時自動重新繪製。這與 Firefox、Opera 和 IE 等其他瀏覽器形成鮮明對比，後者可以更無縫地處理這些變更。

透過微調強制重新繪製

因為 WebKit 不更新自動樣式，您可以透過對頁面上的任何元素進行較小的變更來強制重新繪製。在 Chrome 開發者工具中，您觀察到，即使取消選取並重新選取任意元素的屬性也會觸發正確的樣式更新。

建議的解決方案

以程式方式強制重新繪製，您可以使用以下技術：

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

此方法涉及暫時隱藏然後取消隱藏元素。 offsetHeight 行確保瀏覽器實際套用變更。您不需要儲存它返回的高度。

潛在限制

所提供的解決方案已確認適用於具有「區塊」顯示的元素。對於具有其他顯示模式的元素，它可能會表現出不同的行為，但這需要進一步調查。

以上是為什麼 WebKit 不自動更新樣式，如何強制重繪？的詳細內容。更多資訊請關注PHP中文網其他相關文章！