[解決済み] DIVのディメンションが変更されたことを検出する方法は？
2022-03-21 13:29:07
質問
以下のようなサンプルhtmlがあり、幅が100%のDIVがあります。その中にいくつかの要素が含まれています。ウィンドウのサイズを変更している間、内部の要素は再配置され、DIVの寸法が変更される可能性があります。divの寸法変更イベントをフックすることが可能かどうか、またその方法を教えてください。現在、コールバック関数をターゲットDIVのjQuery resizeイベントにバインドしていますが、以下のようにコンソールログが出力されない状態です。
<html>
<head>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" language="javascript">
$('#test_div').bind('resize', function(){
console.log('resized');
});
</script>
</head>
<body>
<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
<input type="button" value="button 1" />
<input type="button" value="button 2" />
<input type="button" value="button 3" />
</div>
</body>
</html>
解決方法は？
要素のサイズが変更されたかどうかを判断するには、非常に効率的な方法があります。
http://marcj.github.io/css-element-queries/
このライブラリは、クラス
ResizeSensor
リサイズ検出に使用することができます。
イベントベースのアプローチを採用しているため、CPU時間を無駄にせず、非常に高速です。
例
new ResizeSensor(jQuery('#divId'), function(){
console.log('content dimension changed');
});
を使用しないでください。
jQuery onresize プラグイン
を使用するため
setTimeout()
を読み取ることと組み合わせて、DOM
clientHeight
/
clientWidth
プロパティをループさせて、変更をチェックします。
これは信じられないほど遅く、不正確である
が発生するため
レイアウトの乱れ
.
情報公開：私はこのライブラリーに直接関係しています。
関連
-
vueはopenlayersを使用してスカイマップとガオードマップをロードする
-
Vueのクラススタイルの使い方の詳細
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか？
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか？
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには？
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は？
-
[解決済み] 配列に特定のインデックスで項目を挿入する方法 (JavaScript)
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか？
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか？
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか？
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン