javascript - DIV幅が変更されたときにクラスを動的に変更する方法は?

Question

ウィンドウ サイズが変更されたときに Jquery を使用してクラスを変更する方法は知っていますが、DIV の幅に基づいて、DIV の幅が変更されたときに動的に変更する必要があります。

$(window).resize(function() {

   var wrapWidth = $('.info-wrap').width();

    if (wrapWidth >= 500) {

      $('#partOne').addClass('big');
      $('#partTwo').addClass('big');

    } else {

      $('#partOne').removeClass('big');
      $('#partTwo').removeClass('big');
    }
});

これは、ウィンドウ サイズが変更されたときに機能します。しかし、$(window).resize の代わりに何を使用して、変化する DIV の幅を取得できますか?

Answer 1

要素の属性を観察する例を次に示します。

参照:MutationObserverおよびMutation Events

CSS

#watch {
    border: 1px solid;
}

HTML

<button id="button">Click me</button>
<div id="watch" style="width: 100px; height: 50px;"></div>

Javascript

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/* global global */

(function (global) {
    "use strict";

    if (typeof global.MutationObserver !== "function") {
        global.MutationObserver = global.WebKitMutationObserver || global.MozMutationObserver;
    }

    var watch = document.getElementById("watch");

    function whenClicked() {
        watch.style.width = "200px";
    }

    document.getElementById("button").addEventListener("click", whenClicked, false);

    if (typeof global.MutationObserver !== "function") {
        // chrome doesn't despatch an event for "DOMAttrModified"
        watch.addEventListener("DOMAttrModified", function (evt) {
            console.log("Attribute changed", evt.target);
        }, false);
    } else {
        var observer = new global.MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                if (mutation.type === 'attributes') {
                    console.log("Attribute changed", mutation);
                }
            });
        });

        observer.observe(watch, {
            attributes: true,
            childList: true,
            characterData: true,
            subtree: true
        });
    }
}(window));

の上jsfiddle

Answer 2

I wrote a plugin sometime back for attrchange listener which basically adds a listener function on attribute change. This seems to come in handy for scenario that you had mentioned where you need a handler to check the width and height.

DEMO: http://jsfiddle.net/CKTk3/1/

    var prevWidth = $('#test').width(),
        prevHeight = $('#test').height();

    $('#test').attrchange({
        callback: function (e) {
            var curWidth = $(this).width(),
                curHeight = $(this).height();            
            if (prevWidth !== curWidth ||
                prevHeight !== curHeight) {
                console.log('resized: width - ' + prevWidth + ' : ' + curWidth + ' height - ' + prevHeight + ' : ' + curHeight);

                prevWidth = curWidth;
                prevHeight = curHeight;
            }            
        }
    }).resizable();

Plugin page: http://meetselva.github.io/attrchange/

Answer 3

Ben Alman の pluginなど、JQuery 用のプラグインを使用する必要があると思います。

div のサイズが変更されたときに検出するものは存在しないと思います。ウィンドウだけです。

Answer 4

div クラスまたは id で div 幅を取得できます。例: $("#div-id").width();