87

jQueryにはresize()- イベントがありますが、ウィンドウでのみ機能します。

jQuery(window).resize(function() { /* What ever */ });

これはうまくいきます！しかし、イベントを div 要素に追加したい場合は機能しません。

例えば

jQuery('div').resize(function() { /* What ever */ });

div 要素のサイズが変更されたときにコールバックを開始したい。サイズ変更可能なイベントを開始したくありません。div 要素のサイズが変更されたかどうかを確認するためのイベントです。

これを行う解決策はありますか？

4

13 に答える 13

35

DIVイベントを発生させないresizeため、コーディングしたことを正確に実行することはできませんが、DOMプロパティの監視を調べることはできます。

サイズ変更可能のようなものを実際に使用していて、それがdivのサイズを変更する唯一の方法である場合、サイズ変更プラグインはおそらく独自のコールバックを実装します。

于 2012-04-10T10:08:10.440 に答える
22 
// this is a Jquery plugin function that fires an event when the size of an element is changed
// usage: $().sizeChanged(function(){})

(function ($) {

$.fn.sizeChanged = function (handleFunction) {
    var element = this;
    var lastWidth = element.width();
    var lastHeight = element.height();

    setInterval(function () {
        if (lastWidth === element.width()&&lastHeight === element.height())
            return;
        if (typeof (handleFunction) == 'function') {
            handleFunction({ width: lastWidth, height: lastHeight },
                           { width: element.width(), height: element.height() });
            lastWidth = element.width();
            lastHeight = element.height();
        }
    }, 100);


    return element;
};

}(jQuery));
于 2015-06-10T16:08:31.367 に答える
6

これはどうですか：

divH = divW = 0;
jQuery(document).ready(function(){
    divW = jQuery("div").width();
    divH = jQuery("div").height();
});
function checkResize(){
    var w = jQuery("div").width();
    var h = jQuery("div").height();
    if (w != divW || h != divH) {
        /*what ever*/
        divH = h;
        divW = w;
    }
}
jQuery(window).resize(checkResize);
var timer = setInterval(checkResize, 1000);

ところで、div に id を追加し、$("div") を $("#yourid") に変更することをお勧めします。これにより高速になり、後で他の div を追加しても壊れません。

于 2012-04-10T10:11:38.447 に答える
5

今年リリースされた、基本的な JavaScript と jQuery の両方に適した、使いやすく軽量な (検出にネイティブ ブラウザー イベントを使用する) プラグインがあります。それは完璧に機能します：

https://github.com/sdecima/javascript-detect-element-resize

于 2014-09-04T17:16:07.763 に答える
2

はい、ウィンドウのみがサポートされていますが、プラグインを使用できます：http: //benalman.com/projects/jquery-resize-plugin/

于 2012-04-10T10:07:16.107 に答える