1. ホーム
  2. css

[解決済み】スタイルの変更を伝播するために、WebKitに再描画/再塗装を強制するにはどうすればよいですか?

2022-04-02 01:27:33

質問

私はスタイルを変更するためにいくつかの些細なJavaScriptを持っています。

sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;

FF、Opera、IEの最新版では問題なく動作しますが、Chrome、Safariの最新版では失敗します。

たまたま兄弟である2つの子孫に影響します。最初の兄弟は更新されますが、2番目の兄弟は更新されません。2番目の要素の子もフォーカスを持ち、その子には <a> タグの中に、上記のコードを含む オンクリック 属性で指定します。

Chromeの「デベロッパーツール」ウィンドウで、ナッジ(例:チェックを外す & チェックする)すると 任意の 属性の 任意の 要素を使用すると、2番目の兄弟が正しいスタイルに更新されます。

WebKit が正しいことをするように、簡単かつプログラム的に「誘導」する回避策はありますか?

解決方法は?

複雑な提案もあれば、単純な提案も多く、うまくいきませんでしたが、ある提案へのコメントで バシル・ディンコフ は、再描画/再塗装を強制する簡単な解決策を提供し、うまく機能しました。

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';

ブロック」以外のスタイルで動作するかは、他の方のコメントにお任せします。

Vasilさん、ありがとうございます。