0

レスポンシブ コンテンツのために要素のサイズがいつ変更されるかを検出する必要があります。ウィンドウのサイズが変更されたかどうかを検出する例はすべて表示されますが、DOM 要素のサイズが変更されたかどうかを検出する方法が見つかりません。たとえば、次の例ではウィンドウのサイズ変更のみがカウントされます。

HTML:

<div id="resizer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac accumsan elit, sit amet ultrices massa. Pellentesque iaculis nulla ut fringilla pellentesque. Duis ut suscipit libero. Sed et mauris nisl.</div>
<output id="output1">Div not yet resized.</output>
<output id="output2">Window not yet resized.</output>

JS:

var divResizes = 0;
$("#resizer").resize(function(){
    $('#output1').html("Div resized " + ++divResizes + " times.");
});
var windowResizes = 0;
$(window).resize(function() {
    $('#output2').html("Window resized " + ++windowResizes + " times.");
});

ウィンドウのサイズを変更した後のサンプル出力:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac accumsan elit, sit amet ultrices massa. Pellentesque iaculis nulla ut fringilla pellentesque. Duis ut suscipit libero. Sed et mauris nisl. Div はまだサイズ変更されていません。ウィンドウのサイズを 23 回変更しました。

SSCCE: http://jsfiddle.net/3K2YY/

4

2 に答える 2

1

window公式仕様にのみonresizeイベントがあります。からポリフィルを使用する

https://github.com/marcj/css-element-queries

それを機能させるために。

このライブラリには、ResizeSensor使用できるクラスがあります。

var divResizes = 0;
new ResizeSensor($("#resizer"), function(){
    $('#output1').html("Div resized " + ++divResizes + " times.");
});
于 2014-09-13T14:40:07.027 に答える