div要素のサイズを変更する

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

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

これは問題なく動作します！しかし、イベントをdiv要素に追加したい場合、それは機能しません。

例えば

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

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

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

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

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

要素の幅が変更されたときのトリガーにのみ関心があったので（高さは気にしません）、非表示のiframe要素を使用してそれを正確に行うjqueryイベントを作成しました。

$.event.special.widthChanged = {
  remove: function() {
      $(this).children('iframe.width-changed').remove();
  },
  add: function () {
      var elm = $(this);
      var iframe = elm.children('iframe.width-changed');
      if (!iframe.length) {
          iframe = $('<iframe/>').addClass('width-changed').prependTo(this);
      }
      var oldWidth = elm.width();
      function elmResized() {
          var width = elm.width();
          if (oldWidth != width) {
              elm.trigger('widthChanged', [width, oldWidth]);
              oldWidth = width;
          }
      }

      var timer = 0;
      var ielm = iframe[0];
      (ielm.contentWindow || ielm).onresize = function() {
          clearTimeout(timer);
          timer = setTimeout(elmResized, 20);
      };
  }
}

次のCSSが必要です。

iframe.width-changed {
    width: 100%;
    display: block;
    border: 0;
    height: 0;
    margin: 0;
}

ここで実際の動作を確認できますwidthChangedフィドル

// 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));

jqueryプラグインjquery.resizeを作成しました。サポートされている場合はresizeObserverを使用するか、marcj / css-element-queriesスクロールイベントに基づくソリューションで、setTimeout / setIntervalは使用しません。

あなたはただ使う

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

またはリサイザープラグインとして

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

これをjQueryターミナル用に作成し、別々のリポジトリとnpmパッケージに抽出しましたが、要素がiframe内にある場合にサイズ変更に問題があったため、その間に非表示のiframeに切り替えました。それに応じてプラグインを更新する場合があります。jQueryターミナルのソースコードでiframeベースのリサイザープラグインを見ることができます。

編集：新しいバージョンはiframeを使用し、ページがiframe内にあるときに以前のソリューションが機能していなかったため、ウィンドウオブジェクトのサイズを変更します。

EDIT2：フォールバックはiframeを使用するため、フォームコントロールや画像では使用できないため、ラッパー要素に追加する必要があります。

EDIT3 ::ミューテーションオブザーバーを使用し（resizeObserverがサポートされていない場合）、IEでも機能するresizeObserverポリフィルを使用したより良いソリューションがあります。TypeScriptタイピングもあります。

これはどうですか：

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を追加しても壊れません。

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

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

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

グーグルマップの統合のために、私はdivのサイズが変更されたことを検出する方法を探していました。グーグルマップは、適切にレンダリングするために、幅や高さなどの適切な寸法を常に必要とするためです。

私が思いついた解決策は、イベントの委任、私の場合はタブクリックです。もちろん、これはウィンドウのサイズ変更である可能性がありますが、考え方は同じです。

if (parent.is(':visible')) {
    w = parent.outerWidth(false);
    h = w * mapRatio /*9/16*/;
    this.map.css({ width: w, height: h });
} else {
    this.map.closest('.tab').one('click', function() {
        this.activate();
    }.bind(this));
}

this.mapこの場合は私のマップdivです。私の親はロード時に表示されないため、計算された幅と高さは0であるか、一致しません。を使用.bind(this)することで、スクリプトの実行（this.activate）をイベント（click）に委任できます。

これで、同じことがサイズ変更イベントにも当てはまると確信しています。

$(window).one('resize', function() {
    this.div.css({ /*whatever*/ });
}.bind(this));

それが誰にでも役立つことを願っています！

この関数を試してみてください（divだけでなく機能する場合もあります）：

function resized(elem, func = function(){}, args = []){
    elem = jQuery(elem);
    func = func.bind(elem);
    var h = -1, w = -1;
    setInterval(function(){
        if (elem.height() != h || elem.width() != w){
            h = elem.height();
            w = elem.width();
            func.apply(null, args);
        }
    }, 100);
}

このように使えます

resized(/*element*/ '.advs-columns-main > div > div', /*callback*/ function(a){
    console.log(a);
    console.log(this); //for accessing the jQuery element you passed
}, /*callback arguments in array*/ ['I\'m the first arg named "a"!']);

更新： よりプログレッシブなウォッチャーを使用することもできます（DOM要素だけでなく、任意のオブジェクトに対して機能します）：

function changed(elem, propsToBeChanged, func = function(){}, args = [], interval = 100){
        func = func.bind(elem);
        var currentVal = {call: {}, std: {}};
        $.each(propsToBeChanged, (property, needCall)=>{
            needCall = needCall ? 'call' : 'std';
            currentVal[needCall][property] = new Boolean(); // is a minimal and unique value, its equivalent comparsion with each other will always return false
        });
        setInterval(function(){
            $.each(propsToBeChanged, (property, needCall)=>{
                try{
                    var currVal = needCall ? elem[property]() : elem[property];
                } catch (e){ // elem[property] is not a function anymore
                    var currVal = elem[property];
                    needCall = false;
                    propsToBeChanged[property] = false;
                }
                needCall = needCall ? 'call' : 'std';
                if (currVal !== currentVal[needCall][property]){
                    currentVal[needCall][property] = currVal;
                    func.apply(null, args);
                }
            });
        }, interval);
    }

やってみなよ：

var b = '2',
    a = {foo: 'bar', ext: ()=>{return b}};
changed(a, {
// prop name || do eval like a function?
    foo:        false,
    ext:        true
}, ()=>{console.log('changed')})

b、a.foo、またはa.extを直接変更するたびに、「変更された」ログが記録されます。

画面サイズに応じて、テキストまたはコンテンツまたは属性を変更できます。HTML：

<p class="change">Frequently Asked Questions (FAQ)</p>
<p class="change">Frequently Asked Questions </p>

Javascript：

<script>
const changeText = document.querySelector('.change');
function resize() {
  if((window.innerWidth<500)&&(changeText.textContent="Frequently Asked Questions (FAQ)")){
    changeText.textContent="FAQ";
  } else {
    changeText.textContent="Frequently Asked Questions (FAQ)";
  }
}
window.onresize = resize;
</script>

div自体のサイズを変更したいだけの場合は、cssスタイルで指定する必要があります。あなたは追加する必要がオーバーフローし、プロパティのサイズを変更します。

以下は私のコードスニペットです

#div1 {
        width: 90%;
        height: 350px;
        padding: 10px;
        border: 1px solid #aaaaaa;
        overflow: auto;
        resize: both;
    }

<div id="div1">

</div>