JavaScriptスニペットは、DOM要素の再描画/塗り直しを強制します

JavaScriptコードスニペットDOM Element Redraw/Repaintを強制します。少しハッキーですが、最後の手段として便利です。

<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 Element Redraw/Repaint

を強制することに関するよくある質問（FAQ） JavaScriptのDom Element Redraw/Repaintとは？

​​ javaScriptでは、ドキュメントオブジェクトモデル（DOM）要素の再描画または塗り直しは、Webページ上の要素の視覚的表現を更新するプロセスを指します。これは、要素のスタイルまたはコンテンツに変更が加えられている場合に多くの場合必要です。ブラウザはほとんどの再描画や塗り替えを自動的に処理しますが、場合によっては、JavaScriptを使用してこのプロセスを手動でトリガーする必要がある場合があります。これは、ブラウザの次の塗り直しサイクルを待つのではなく、要素がすぐに更新されるようにする状況で役立つことがあります。 >

DOM要素を強制的に再描画または塗り直す必要があるかもしれない理由がいくつかあります。一般的な理由の1つは、要素のスタイルまたはコンテンツの変化のために発生した視覚的な不具合または異常を修正することです。もう1つの理由は、ブラウザの次の塗り直しサイクルを待つのではなく、変更後すぐに要素が更新されることを確認することです。これは、ゲームやインタラクティブなアプリケーションなど、ユーザーにリアルタイムのフィードバックを提供する必要がある状況で特に役立ちます。 🎜>

要素のスタイルまたはコンテンツに小さな一時的な変更を加えることにより、JavaScriptを使用してDOM要素を再描画または塗り直すことができます。これにより、ブラウザの塗り直しプロセスがトリガーされ、要素がすぐに更新されます。簡単な例は次のとおりです。

var element = document.getElementById（ 'myElement'）;

element.style.display = 'none';

element.offseTheight; //これをどこにでも保存する必要はありません、参照は十分です

element.style.display = '';

jqueryを使用してDOM要素を再描画/再塗装するように強制できますか？はい、jqueryを使用してDOM要素に再描画または塗り直しを強制できます。このプロセスはJavaScriptメソッドに似ていますが、いくつかの小さな違いがあります。例は次のとおりです。

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

DOM要素を再描画/塗り直しに強制するための潜在的な問題や欠点はありますか？

DOM要素を再描画または塗り直さないようにすることは、特定の状況で役立ちますが、それができることに注意することが重要ですまた、パフォーマンスに悪影響を及ぼします。特に複雑な要素または大量のデータに対して、操作の再描画と補償は、リソース集約的なものです。したがって、一般に、この手法を控えめに使用することをお勧めします。必要な場合にのみ。再描画と塗り直しとは、基本的に同じプロセスを指します。ウェブページ上の要素の視覚的表現を更新します。ただし、一部の開発者は「RedRaw」という用語を使用して、ページのレイアウトに影響する変更（要素のサイズや位置の変更など）に特に言及しますが、「塗り直し」とは、要素の外観に影響する変化を指します（色や背景画像の変更など）。ボディ要素のスタイルまたはコンテンツに小さな一時的な変更を加えることにより、ページ上。ただし、これは非常にリソース集中的であり、パフォーマンスの問題を引き起こす可能性があるため、注意して行う必要があります。はい、特定のDOM要素または要素のグループをターゲットにすることにより、ページの特定の部分の再描画または塗り替えを強制できます。これは、上記の例に示すように、Plain JavaScriptまたはjQueryのいずれかを使用して実行できます。

すべてのブラウザで再描画/塗り直し作業を強制することはできますか？要素のスタイルやコンテンツに小さな一時的な変更を加えると、すべての最新のブラウザで機能するはずです。ただし、複数のブラウザでコードをテストして互換性を確保することをお勧めします。

CSSを使用して再描画/塗り直しを強制できますか？要素のスタイルに小さな一時的な変更を加えることにより、再描画または塗り直します。これは、CSSクラスを追加または削除するか、要素のスタイルプロパティを直接変更することで実行できます。ただし、この方法は、ブラウザのCSSレンダリングエンジンに依存するため、JavaScriptやJQueryを使用するほど信頼できない場合があります。

以上がJavaScriptスニペットは、DOM要素の再描画/塗り直しを強制しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。