JavaScript摘要強制dom元素redraw/重新粉刷

JavaScript代碼段強制迫使DOM元素重新繪製/重新塗抹。有點駭客，但作為最後的手段有用。

<span>var element = document.getElementById('id');
</span><span>var n = document.createTextNode(' ');
</span><span>var disp = element.style.display;  // don't worry about previous display style
</span>
element<span>.appendChild(n);
</span>element<span>.style.display = 'none';
</span>
<span>setTimeout(function(){
</span>    element<span>.style.display = disp;
</span>    n<span>.parentNode.removeChild(n);
</span><span>},20); // you can play with this timeout to make it as short as possible</span>

使用Transit.js

如果您使用的過渡插件（例如Transit.js）也有效：

<span>$('#element')
</span>    <span>.transition({ x: '-500px', easing: 'snap', duration:'0' })
</span>    <span>.transition({ x: '0', easing: 'snap', duration:'0' })
</span>    <span>.css('z-index','10');</span>

> css：

#element <span>{
</span>     <span>position: absolute;
</span>     <span>right: '-500px';
</span>     z<span>-index: -1;
</span><span>}</span>

>經常詢問的問題（常見問題解答），以強制dom元素重新繪製/重新塗漆

在JavaScript？

中，什麼是DOM元素Redraw/重新粉刷在JavaScript中，文檔對像模型（DOM）element Redraw或Repraw是指更新網頁上元素的視覺表示的過程。當對元素的樣式或內容進行更改時，通常是必要的。瀏覽器會自動處理大多數重繪和重新塗片，但是在某些情況下，您可能需要使用JavaScript手動觸發此過程。在您要確保立即更新元素的情況下，這可能很有用，而不是等待瀏覽器的下一個重新塗漆週期。

>

>為什麼我需要強制dom元素重新繪製/重新塗漆？ >

>有幾個原因為什麼您可能需要強制DOM元素重新繪製或重新粉刷。一個常見的原因是修復由於元素樣式或內容的變化而發生的視覺故障或異常。另一個原因是確保更改後立即更新元素，而不是等待瀏覽器的下一個重新塗漆週期。在您需要向用戶提供實時反饋的情況下，這可能特別有用，例如在遊戲或Interactive應用程序中。

>

>如何強制使用javascript重新繪製DOM元素？ var element = document.getElementById（'myElement'）;

element.Style.display ='none'';
element.offsetheight; //無需將其存儲在任何地方，參考就足夠
元素。是的，您可以使用jQuery強迫DOM元素重新繪製或重新粉刷。該過程類似於JavaScript方法，但有一些較小的差異。這是一個示例：

var $ element = $（'＃myElement'）;
$ element.hide（）。

>在某些情況下強迫DOM元素重新繪製或重新塗抹時，在某些情況下，強迫DOM元素重新繪製/重新啟動是否有潛在的問題或缺點？也對性能產生負面影響。重新製作和重新粉刷的操作可能是資源密集的，尤其是對於復雜的元素或大量數據。因此，通常建議謹慎使用此技術，並且只有在必要時才使用。

>在JavaScript中重新繪製和重新粉刷之間是否存在差異？重新繪製和重新粉刷本質上是指相同的過程：更新網頁上元素的視覺表示。但是，一些開發人員使用“ Redraw”一詞專門提及影響頁面佈局的更改（例如更改元素的大小或位置），而“重新塗抹”是指影響元素外觀的變化（例如更改其顏色或背景圖像） 。

>我可以在頁面上強制對所有元素的重新繪製/重新塗漆？頁面上的元素通過對身體元素的樣式或內容進行暫時的暫時更改。但是，這應該謹慎進行，因為它可能是非常密集的，並且可能導致性能問題。

我可以強制對頁面的特定部分的重新繪製/重新塗抹？是的，您可以通過針對特定的DOM元素或一組元素來強制頁面特定部分的重繪或重新塗抹。這可以使用普通的JavaScript或jQuery完成，如上所述。對元素的樣式或內容進行小的臨時更改應在所有現代瀏覽器中起作用。但是，在多個瀏覽器中測試您的代碼總是一個好主意。通過對元素的樣式進行小的臨時更改來重新繪製或重新粉刷。這可以通過添加或刪除CSS類或直接修改元素樣式屬性來完成。但是，此方法可能不像使用JavaScript或JQuery那樣可靠，因為它取決於瀏覽器的CSS渲染引擎。

以上是JavaScript摘要強制dom元素redraw/重新粉刷的詳細內容。更多資訊請關注PHP中文網其他相關文章！