☰

DIV の寸法が変更されたことを検出するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon javascript jquery html
DIV の寸法が変更されたことを検出するにはどうすればよいでしょうか? 質問する

次のサンプル 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>

ベストアンサー1

このための新しい標準は、優れたブラウザ サポートを備えた Resize Observer API です。

function outputsize() {
 width.value = textbox.offsetWidth
 height.value = textbox.offsetHeight
}
outputsize()

new ResizeObserver(outputsize).observe(textbox)
Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Resize me</textarea><br>

オブザーバーのサイズ変更

ドキュメンテーション：https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API

仕様:https://wicg.github.io/ResizeObserver

現在のサポート:http://caniuse.com/#feat=resizeobserver

ポリフィル:https://github.com/pelotoncycle/resize-observer https://github.com/que-etc/resize-observer-polyfill https://github.com/juggle/resize-observer

おすすめ記事