WebKit ブラウザには、JavaScript を介して行われたスタイルの変更を反映するために「ナッジ」が必要なのはなぜですか?

WebKit の再描画の謎めいた動作: スタイルの変更の解決

Web 開発の領域では、ブラウザー間で一貫した外観を確保することが課題となる場合があります。このような問題の 1 つは、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 ブラウザでは、変更された要素の直接の兄弟であっても、影響を受ける最初の子孫の兄弟要素のみが更新され、2 番目の要素は変更されません。

興味深いことに、Chrome の「開発者ツール」では、単に任意の要素を切り替えるだけで、任意の要素の属性により、2 番目の兄弟の正しいレンダリングがトリガーされます。これは、WebKit にはスタイルの変更を伝達するための「ナッジ」が必要であることを示唆しています。

簡単だが効果的なソリューション

さまざまな非効果的な推奨事項を検討した結果、シンプルでエレガントなソリューションが登場しました。ワシル・ディンコフ氏のコメント。 WebKit で再描画を強制するには、次のコマンドを実行します。

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

この手法では、要素 (「sel」) を非表示にし、その offsetHeight (非表示でない要素のゼロ以外のプロパティ) を読み取り、再表示します。要素。この微妙な操作により再描画がトリガーされ、意図したスタイルの変更が反映されます。

追加の考慮事項

この解決策が「ブロック」を超えたスタイルの変更に適用されるかどうかはまだテストされていません。財産。ただし、著者の状況では、これは簡単で効果的な解決策を提供しました。スタイルの伝播における不一致を排除することで、WebKit ベースのブラウザ間で視覚的に一貫した Web ページが確保されます。

以上がWebKit ブラウザには、JavaScript を介して行われたスタイルの変更を反映するために「ナッジ」が必要なのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。