Javascript 如何在DIV宽度更改时动态更改类？

我知道如何在窗口大小更改时使用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');
    }
});

---

当窗口大小发生变化时，此操作有效。但是，我可以使用insead of$（window）来做什么呢？调整大小以获得DIV的宽度，因为它会发生变化。

我认为您需要为JQuery使用一个插件，例如

---

我认为当一个div被调整大小时，不存在检测的东西，只有窗口。

我认为您需要使用JQuery插件，比如

---

我认为当一个div被调整大小时，不存在检测的东西，只有窗口。

您可以通过div类或id来获取div宽度。例如：$（“#div id”）.width（）

可以通过div类或id获取div宽度。例如：$（“#div id”）.width（）

不久前，我为监听器编写了一个插件，它基本上在属性更改时添加了一个监听器函数。对于您提到的需要处理程序来检查宽度和高度的场景，这似乎很方便

演示：

---

插件页面：

我为监听器写了一个插件，它基本上在属性更改时添加了一个监听器函数。对于您提到的需要处理程序来检查宽度和高度的场景，这似乎很方便

演示：

---

插件页面：

以下是观察元素属性的示例

见：和

CSS

HTML

---

以下是观察元素属性的示例

见：和

CSS

HTML

---

在

上，是什么触发了

div的大小调整

？如果div的宽度仅在窗口大小调整时改变，这里有什么问题？什么叫调整大小？现有的插件？或者它是否启用了CSS3

resize:both

？如果它是由CSS3绑定的，请检查这里->我无法控制自己：您可以将其重写为$（“#partOne，#partTwo”）。toggleClass（'big'，wrapWidth>=500）是什么触发了

div的大小调整？如果div的宽度仅在窗口大小调整时更改，这里的问题是什么？如何调用大小调整？现有的插件？或者它是否启用了CSS3
resize:both
？如果它是由CSS3绑定的，请点击这里->无法控制自己：您可以将其重写为$（“#partOne，#partTwo”）。toggleClass（'big'，wrapWidth>=500）注意：此插件使用轮询。注意：此插件使用轮询。+1，就像MutationObserver的跟踪修复程序一样。比轮询解决方案好得多。@Xotic750感谢您查看我的答案。+1，就像MutationObserver的跟踪修复程序一样。比轮询解决方案好得多。@Xotic750感谢您查看我的答案。
    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();

#watch {
    border: 1px solid;
}

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

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