jQuery를 사용하여 div의 높이가 변경되는 경우 감지

jQuery를 사용하여 div의 높이가 변경되는 경우 감지

저는 동적으로 추가되고 제거되는 콘텐츠를 포함하는 디브를 가지고 있습니다. 그래서 그 높이는 자주 바뀌고 있습니다.저는 또한 자바스크립트로 바로 아래에 위치한 div를 가지고 있기 때문에, div의 높이가 언제 변하는지 감지할 수 없다면, 그 아래에 div의 위치를 바꿀 수 없습니다.

그렇다면, 그 div의 높이가 언제 변하는지 어떻게 알 수 있을까요?사용해야 할 jQuery 이벤트가 있을 것 같은데 어떤 이벤트에 연결해야 할지 모르겠습니다.

CSS-element-query 라이브러리에서 크기 조정 센서를 사용합니다.

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

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

이벤트 기반 접근 방식을 사용하여 CPU 시간을 낭비하지 않습니다.를 포함한 모든 브라우저에서 작동합니다.IE7+.

저는 속성 변경 시 기본적으로 수신기 기능을 추가하는 속성 수신기용 플러그인을 얼마 전에 작성했습니다.플러그인이라고 하지만, 사실은 jQuery 플러그인으로 작성된 간단한 기능입니다.그러니 당신이 원한다면..플러그인별 코드를 제거하고 핵심 기능을 사용합니다.

참고: 이 코드는 폴링을 사용하지 않습니다.

이 간단한 데모를 확인하십시오. 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();
});

플러그인 페이지: http://meetselva.github.io/attrchange/

최소화된 버전: (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)

DOM 하위 트리 수정 이벤트를 사용할 수 있습니다.

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

그러나 이는 치수가 변경되지 않더라도 작동하며, 작동할 때마다 위치를 재할당하면 성능에 타격을 줄 수 있습니다.제가 이 방법을 사용한 경험으로 볼 때, 치수가 바뀌었는지 확인하는 것이 비용이 덜 들기 때문에 두 가지를 결합하는 것을 고려해 볼 수 있습니다.

또는 div를 직접 변경하는 경우(div가 contentEditable인 경우와 같이 사용자 입력에 의해 예측할 수 없는 방식으로 변경되는 것이 아니라) 사용자 정의 이벤트를 실행할 때마다 간단히 실행할 수 있습니다.

단점:IE와 Opera는 이 이벤트를 구현하지 않습니다.

최근에 이 문제를 처리한 방법은 다음과 같습니다.

$('#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');
}

저는 제가 파티에 몇 년 늦었다는 것을 압니다. 단지 제 대답이 플러그인을 다운로드하지 않고도 미래에 몇몇 사람들에게 도움이 될 수 있다고 생각합니다.

당신은 수업을 이용할 수 있습니다.

MutationObserver개발자는 DOM의 변경 사항에 대응할 수 있는 방법을 제공합니다.DOM3 Events 사양에 정의된 Mutation Events를 대체하도록 설계되었습니다.

예제(소스)

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

사용자 007에 대한 응답:

되어 요소의 되는 경우 합니다..append()당신은 키의 변화를 감지할 필요가 없습니다.새 내용을 첫 번째 요소에 추가하는 것과 동일한 기능에서 두 번째 요소의 위치를 추가하기만 하면 됩니다.

다음과 같이:

작업 예제

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

요즘에는 웹 API도 사용할 수 있습니다.

간단한 예:

const myElement = document.querySelector('#myElement');

const resizeObserver = new ResizeObserver(() => {
    console.log('size of myElement changed');
});

resizeObserver.observe(myElement);

간단한 setInterval을 만들 수 있습니다.

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

편집:

이것은 클래스가 있는 예제입니다.하지만 당신은 가장 쉬운 것을 할 수 있습니다.

당신은 이것을 사용할 수 있지만 파이어폭스와 크롬만 지원합니다.

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

꽤 기본적이지만 작동합니다.

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

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

언급URL : https://stackoverflow.com/questions/172821/detecting-when-a-divs-height-changes-using-jquery