如何在DIV寬度更改時動態更改類？

當窗口大小發生變化時，我知道如何使用Jquery更改類，但是我需要它基於DIV的寬度，並在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的insead來獲取DIV的寬度，因爲它改變了嗎？

來源

2013-07-17 Cake

什麼觸發'div'的大小調整？ –

如果DIV的寬度僅在窗口大小上發生變化，那麼這裏有什麼問題？ –

什麼叫調整大小？現有的插件？或者它有CSS3調整大小：兩個啓用？如果它受到CSS3的約束，請點擊此處 - > [如何檢測CSS3調整大小事件]（http://stackoverflow.com/questions/8082729/how-to-detect-css3-resize-events） – Ohgodwhy

我認爲你需要爲JQuery使用插件，例如Ben Alman's plugin。

我不認爲有什麼東西可以檢測div何時得到調整大小，只有窗口。

來源

2013-07-17 20:40:54 SharkofMirkwood

Ben Alman的插件就像一個魅力。謝謝:) – Cake

很高興它做到了！ – SharkofMirkwood

注意：這個插件使用輪詢。 – Xotic750

您可以通過div class或id獲取div寬度。例如：$（「＃div-id」）。width（）;

來源

2013-07-17 20:44:33 ujjwal

我寫了一個插件返回attrchange監聽器，它基本上增加了一個監聽器函數的屬性變化。這似乎適用於您提到的需要處理程序來檢查寬度和高度的場景。

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

插件頁：http://meetselva.github.io/attrchange/

來源

2013-07-17 20:55:38

+1，就像MutationObserver的跟蹤修復程序一樣。比投票解決方案好得多。 – Xotic750

@ Xotic750感謝您檢查我的答案。 –

下面是觀察屬性的元素的一個例子。

見：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

來源

2013-07-17 21:44:15 Xotic750

如何在DIV寬度更改時動態更改類？

回答

相關問題