在調試 HTML 時，有沒有辦法使用 JavaScript 或 jQuery 來監聽 div 寬度變化？

Question

在調試 HTML 時，有沒有辦法使用 JavaScript 或 jQuery 來監聽 div 寬度變化？ 由於一些 CSS 我有一個 div 改變大小，並且無法弄清楚在哪里，甚至步入。 我想知道是否有辦法將事件連接到 div 以查看導致它發生變化的原因？ 即使可能，我也不確定如何首先傳遞堆棧信息以了解導致大小變化的原因，所以這甚至可能是不可能的。

Answer 1

我使用 Chrome，它似乎提供了最多的細節。

• 下載鉻
• 按 f12
• 轉到第一個選項卡 [元素]
• 單擊放大鏡和 go 到您的 div
• 右鍵單擊突出顯示的 html 和 select “中斷子樹修改”

Answer 2

這是不好的方式，但我不確定這樣的事件是否存在。

$(function(){
    var last = $("#your_div").width();
    setInterval(function(){
        if (last != $("#your_div").width()){
            alert('div width changed');
        }
    }, 100);
});

Answer 3

這個人解釋了如何附加到 DOMAttrModified 事件以檢測 CSS 更改。

使用 Jquery 更改 css 屬性時的事件檢測

它僅在 FF 和 Opera 中受支持，但如果它只是用於調試，它就可以解決問題。

http://www.quirksmode.org/dom/events/

Answer 4

FireFox 的 Firebug 允許您在 CSS 上附加和斷開，並且屬性更改是您正在尋找的嗎？