WebKit の再描画を強制して子孫要素にスタイルを確実に継承するにはどうすればよいですか?

スタイル伝播のための WebKit 再描画の強制

JavaScript スタイルの変更を実装する場合、Web 開発者はブラウザ間で不一致が発生する可能性があります。 Chrome や Safari などの WebKit ベースのブラウザでは、要素のクラス名への単純な更新が子孫に反映されない場合があります。

この問題は兄弟を更新するときに発生し、最初の兄弟は新しいスタイルを受け取りますが、2 番目の兄弟は影響を受けません。 。影響を受ける要素内にフォーカスとアンカー タグが存在するため、状況はさらに複雑になります。

回避策: Display Toggle で再描画をトリガーする

WebKit でこの問題を解決するには、簡単で効果的な回避策は、影響を受けるデバイスの表示プロパティを切り替えることです。 element:

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

これにより、再描画または再描画操作がトリガーされ、スタイルの変更がすべての子孫に反映されます。この手法はブロックレベルの要素に対して機能することが確認されており、他の表示タイプに対する有効性についてはさらなる調査が必要になる可能性があることは注目に値します。

以上がWebKit の再描画を強制して子孫要素にスタイルを確実に継承するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。