Phát hiện khi chiều cao của div thay đổi bằng jQuery

Tôi đã có một div chứa một số nội dung được thêm và xóa một cách linh hoạt, vì vậy chiều cao của nó đang thay đổi thường xuyên. Tôi cũng có một div được định vị tuyệt đối ngay bên dưới javascript, vì vậy trừ khi tôi có thể phát hiện khi chiều cao của div thay đổi, tôi không thể định vị lại div bên dưới nó.

Vậy, làm thế nào tôi có thể phát hiện khi chiều cao của div đó thay đổi? Tôi giả sử có một số sự kiện jQuery tôi cần sử dụng, nhưng tôi không chắc chắn nên chọn cái nào.

Sử dụng cảm biến thay đổi kích thước từ thư viện truy vấn phần tử css:

https://github.com/marcj/css-element-queries

new ResizeSensor(jQuery('#myElement'), function() {
    console.log('myelement has been resized');
});

Nó sử dụng một cách tiếp cận dựa trên sự kiện và không lãng phí thời gian cpu của bạn. Hoạt động trong tất cả các trình duyệt bao gồm. IE7 +.

Thỉnh thoảng tôi đã viết một plugin cho người nghe attrchange về cơ bản thêm chức năng nghe vào thay đổi thuộc tính. Mặc dù tôi nói nó là một plugin, nhưng thực ra nó là một hàm đơn giản được viết dưới dạng plugin jQuery .. vì vậy nếu bạn muốn .. hãy loại bỏ mã specfic của plugin và sử dụng các hàm cốt lõi.

Lưu ý: Mã này không sử dụng bỏ phiếu

xem bản demo đơn giản này http://jsfiddle.net/aD49d/

$(function () {
    var prevHeight = $('#test').height();
    $('#test').attrchange({
        callback: function (e) {
            var curHeight = $(this).height();            
            if (prevHeight !== curHeight) {
               $('#logger').text('height changed from ' + prevHeight + ' to ' + curHeight);

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

Trang plugin: http://meetselva.github.io/attrchange/

Phiên bản rút gọn: (1.68kb)

(function(e){function t(){var e=document.createElement("p");var t=false;if(e.addEventListener)e.addEventListener("DOMAttrModified",function(){t=true},false);else if(e.attachEvent)e.attachEvent("onDOMAttrModified",function(){t=true});else return false;e.setAttribute("id","target");return t}function n(t,n){if(t){var r=this.data("attr-old-value");if(n.attributeName.indexOf("style")>=0){if(!r["style"])r["style"]={};var i=n.attributeName.split(".");n.attributeName=i[0];n.oldValue=r["style"][i[1]];n.newValue=i[1]+":"+this.prop("style")[e.camelCase(i[1])];r["style"][i[1]]=n.newValue}else{n.oldValue=r[n.attributeName];n.newValue=this.attr(n.attributeName);r[n.attributeName]=n.newValue}this.data("attr-old-value",r)}}var r=window.MutationObserver||window.WebKitMutationObserver;e.fn.attrchange=function(i){var s={trackValues:false,callback:e.noop};if(typeof i==="function"){s.callback=i}else{e.extend(s,i)}if(s.trackValues){e(this).each(function(t,n){var r={};for(var i,t=0,s=n.attributes,o=s.length;t<o;t++){i=s.item(t);r[i.nodeName]=i.value}e(this).data("attr-old-value",r)})}if(r){var o={subtree:false,attributes:true,attributeOldValue:s.trackValues};var u=new r(function(t){t.forEach(function(t){var n=t.target;if(s.trackValues){t.newValue=e(n).attr(t.attributeName)}s.callback.call(n,t)})});return this.each(function(){u.observe(this,o)})}else if(t()){return this.on("DOMAttrModified",function(e){if(e.originalEvent)e=e.originalEvent;e.attributeName=e.attrName;e.oldValue=e.prevValue;s.callback.call(this,e)})}else if("onpropertychange"in document.body){return this.on("propertychange",function(t){t.attributeName=window.event.propertyName;n.call(e(this),s.trackValues,t);s.callback.call(this,t)})}return this}})(jQuery)

Bạn có thể sử dụng sự kiện DOMSubtreeModified

$(something).bind('DOMSubtreeModified' ...

Nhưng điều này sẽ kích hoạt ngay cả khi kích thước không thay đổi và chỉ định lại vị trí bất cứ khi nào nó bắn có thể gây ra hiệu suất. Theo kinh nghiệm của tôi khi sử dụng phương pháp này, kiểm tra xem kích thước đã thay đổi có ít tốn kém hơn hay không và vì vậy bạn có thể cân nhắc kết hợp cả hai.

Hoặc nếu bạn đang trực tiếp thay đổi div (thay vì div bị thay đổi bởi đầu vào của người dùng theo những cách không thể đoán trước, như nếu đó là nội dung có thể chỉnh sửa), bạn có thể chỉ cần kích hoạt một sự kiện tùy chỉnh bất cứ khi nào bạn làm như vậy.

Nhược điểm: IE và Opera không triển khai sự kiện này.

Đây là cách tôi mới xử lý vấn đề này:

$('#your-resizing-div').bind('getheight', function() {
    $('#your-resizing-div').height();
});

function your_function_to_load_content() {
    /*whatever your thing does*/
    $('#your-resizing-div').trigger('getheight');
}

Tôi biết tôi đến bữa tiệc muộn vài năm, chỉ cần nghĩ rằng câu trả lời của tôi có thể giúp một số người trong tương lai mà không phải tải xuống bất kỳ plugin nào.

Bạn có thể sử dụng MutationObserverlớp.

MutationObservercung cấp cho các nhà phát triển một cách để phản ứng với những thay đổi trong DOM. Nó được thiết kế để thay thế cho Sự kiện Đột biến được xác định trong đặc tả Sự kiện DOM3.

Ví dụ ( nguồn )

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();

Có một plugin jQuery có thể xử lý vấn đề này rất tốt

http://www.jqui.net/jquery-projects/jquery-mutate-official/

Đây là bản demo của nó với các kịch bản khác nhau khi thay đổi chiều cao, nếu bạn thay đổi kích thước div viền đỏ.

http://www.jqui.net/demo/mutate/

Đáp lại user007:

Nếu chiều cao của phần tử của bạn thay đổi do các mục được gắn vào phần tử đó, .append()bạn không cần phải phát hiện sự thay đổi về chiều cao. Chỉ cần thêm vị trí của phần tử thứ hai của bạn trong cùng chức năng nơi bạn đang nối thêm nội dung mới vào phần tử đầu tiên.

Như trong:

Ví dụ làm việc

$('.class1').click(function () {
    $('.class1').append("<div class='newClass'><h1>This is some content</h1></div>");
    $('.class2').css('top', $('.class1').offset().top + $('.class1').outerHeight());
});

Bạn có thể tạo một setInterval đơn giản.

function someJsClass()
{
  var _resizeInterval = null;
  var _lastHeight = 0;
  var _lastWidth = 0;
  
  this.Initialize = function(){
    var _resizeInterval = setInterval(_resizeIntervalTick, 200);
  };
  
  this.Stop = function(){
    if(_resizeInterval != null)
      clearInterval(_resizeInterval);
  };
  
  var _resizeIntervalTick = function () {
    if ($(yourDiv).width() != _lastWidth || $(yourDiv).height() != _lastHeight) {
      _lastWidth = $(contentBox).width();
      _lastHeight = $(contentBox).height();
      DoWhatYouWantWhenTheSizeChange();
    }
  };
}

var class = new someJsClass();
class.Initialize();

BIÊN TẬP:

Đây là một ví dụ với một lớp. Nhưng bạn có thể làm một cái gì đó dễ dàng nhất.

Bạn có thể sử dụng cái này, nhưng nó chỉ hỗ trợ Firefox và Chrome.

$(element).bind('DOMSubtreeModified', function () {
  var $this = this;
  var updateHeight = function () {
    var Height = $($this).height();
    console.log(Height);
  };
  setTimeout(updateHeight, 2000);
});

Khá cơ bản nhưng hoạt động:

function dynamicHeight() {
    var height = jQuery('').height();
    jQuery('.edito-wrapper').css('height', editoHeight);
}
editoHeightSize();

jQuery(window).resize(function () {
    editoHeightSize();
});