div 요소에서 크기 조정

div 요소에서 크기 조정

jQuery는.resize()- 이벤트, 하지만 윈도우에서만 작동합니다.

jQuery(window).resize(function() { /* What ever */ });

이 정도면 문제없습니다.하지만 디브 요소에 이벤트를 추가하고 싶을 때는 작동이 되지 않습니다.

예.

jQuery('div').resize(function() { /* What ever */ });

나는 분할 요소의 크기가 바뀌었을 때 콜백을 시작하고 싶습니다.크기 조정 가능한 이벤트를 시작하고 싶지 않습니다. 단지 div 요소의 크기가 변경되었는지 확인하는 이벤트일 뿐입니다.

이것을 해결할 수 있는 방법이 있습니까?

DIV발사하지 않음resize이벤트는 코드화한 것을 정확하게 수행할 수는 없지만 DOM 속성 모니터링을 조사할 수 있습니다.

만약 당신이 실제로 리사이저블과 같은 것으로 작업하고 있고, 그것이 디브의 크기를 바꿀 수 있는 유일한 방법이라면, 당신의 리사이저블 플러그인은 아마도 독자적인 콜백을 구현할 것입니다.

저는 요소의 폭이 변경될 때(높이는 상관 없음) 트리거에만 관심이 있었기 때문에 보이지 않는 iframe 요소를 사용하여 바로 그렇게 하는 jquery 이벤트를 만들었습니다.

$.event.special.widthChanged = {
  remove: function() {
      $(this).children('iframe.width-changed').remove();
  },
  add: function () {
      var elm = $(this);
      var iframe = elm.children('iframe.width-changed');
      if (!iframe.length) {
          iframe = $('<iframe/>').addClass('width-changed').prependTo(this);
      }
      var oldWidth = elm.width();
      function elmResized() {
          var width = elm.width();
          if (oldWidth != width) {
              elm.trigger('widthChanged', [width, oldWidth]);
              oldWidth = width;
          }
      }

      var timer = 0;
      var ielm = iframe[0];
      (ielm.contentWindow || ielm).onresize = function() {
          clearTimeout(timer);
          timer = setTimeout(elmResized, 20);
      };
  }
}

다음과 같은 CSS가 필요합니다.

iframe.width-changed {
    width: 100%;
    display: block;
    border: 0;
    height: 0;
    margin: 0;
}

당신은 여기서 그것을 실제로 볼 수 있습니다 width

// this is a Jquery plugin function that fires an event when the size of an element is changed
// usage: $().sizeChanged(function(){})

(function ($) {

$.fn.sizeChanged = function (handleFunction) {
    var element = this;
    var lastWidth = element.width();
    var lastHeight = element.height();

    setInterval(function () {
        if (lastWidth === element.width()&&lastHeight === element.height())
            return;
        if (typeof (handleFunction) == 'function') {
            handleFunction({ width: lastWidth, height: lastHeight },
                           { width: element.width(), height: element.height() });
            lastWidth = element.width();
            lastHeight = element.height();
        }
    }, 100);


    return element;
};

}(jQuery));

jquery 플러그인 jquery를 만들었습니다.resize는 지원되는 경우 resizeObserver를 사용하거나 marcj/css-element-query 스크롤 이벤트에 기반한 솔루션을 사용합니다. setTimeout/set은 없습니다.간격.

당신은 그냥.

 jQuery('div').on('resize', function() { /* What ever */ });

또는 resizer plugin으로서

jQuery('div').resizer(function() { /* What ever */ });

jQuery Terminal용으로 이것을 만들고 분리된 repo와 npm 패키지로 추출했지만, 그동안 iframe 안에 요소가 있으면 크기를 조정하는 데 문제가 있어서 hidden iframe으로 전환했습니다.그에 따라 플러그인을 업데이트 할 수 있습니다.iframe 기반 리사이저 플러그인은 jQuery Terminal 소스 코드에서 확인할 수 있습니다.

편집: 페이지가 iframe 안에 있을 때 이전 솔루션이 작동하지 않았기 때문에 새 버전은 iframe을 사용하고 창 개체의 크기를 조정합니다.

EDIT2: 폴백은 폼컨트롤이나 이미지와 함께 사용할 수 없는 프레임이므로 래퍼 요소에 추가해야 합니다.

EDIT3:: 돌연변이 관찰자(ResignizeObserver가 지원되지 않는 경우)를 사용하고 IE에서도 작동하는 resignizeObserver 폴리필을 사용하는 것이 더 나은 솔루션입니다.TypeScript 타이핑 기능도 있습니다.

올해 출시된 기본 자바스크립트와 jQuery용으로 정말 멋지고 사용하기 쉬운 경량(탐지를 위해 네이티브 브라우저 이벤트 사용) 플러그인이 있습니다.완벽하게 작동합니다.

https://github.com/sdecima/javascript-detect-element-resize

이것은 어떻습니까?

divH = divW = 0;
jQuery(document).ready(function(){
    divW = jQuery("div").width();
    divH = jQuery("div").height();
});
function checkResize(){
    var w = jQuery("div").width();
    var h = jQuery("div").height();
    if (w != divW || h != divH) {
        /*what ever*/
        divH = h;
        divW = w;
    }
}
jQuery(window).resize(checkResize);
var timer = setInterval(checkResize, 1000);

그건 그렇고 디브에 id를 추가하고 $("div")를 $("#yourid")로 변경하는 것을 제안합니다. 더 빨라질 것이고 나중에 다른 디브를 추가해도 깨지지 않습니다.

관찰자 크기 조정 기능이 있습니다.

다음과 같이 사용할 수 있습니다.

const resizeObserver = new ResizeObserver((entries) => {
  entries.forEach(console.log);
})
resizeObserver.observe(document.getElementById("ExampleElement"));

창만 지원됩니다. yes(예). 그러나 플러그인을 사용할 수 있습니다. http://benalman.com/projects/jquery-resize-plugin/

구글 지도 통합을 위해 나는 디브의 크기가 언제 변했는지를 감지하는 방법을 찾고 있었습니다.구글 맵은 항상 제대로 렌더링하기 위해 폭과 높이 등의 적절한 치수가 필요하기 때문입니다.

제가 생각해낸 해결책은 이벤트의 위임입니다. 탭 클릭의 경우입니다.물론 창 크기가 조정될 수도 있지만, 아이디어는 그대로입니다.

if (parent.is(':visible')) {
    w = parent.outerWidth(false);
    h = w * mapRatio /*9/16*/;
    this.map.css({ width: w, height: h });
} else {
    this.map.closest('.tab').one('click', function() {
        this.activate();
    }.bind(this));
}

this.map이 경우는 제 지도 디브입니다.로드 시 부모님이 보이지 않기 때문에 계산된 너비와 높이가 0이거나 일치하지 않습니다.사용함으로써.bind(this)스크립트 실행을 위임할 수 있습니다(this.activate이벤트에()click).

이제 이벤트 크기 조정에도 동일하게 적용된다고 확신합니다.

$(window).one('resize', function() {
    this.div.css({ /*whatever*/ });
}.bind(this));

누구에게나 도움이 되길 바랍니다!

화면 크기: HTML에 따라 텍스트 또는 내용 또는 속성을 변경할 수 있습니다.

<p class="change">Frequently Asked Questions (FAQ)</p>
<p class="change">Frequently Asked Questions </p>

자바스크립트:

<script>
const changeText = document.querySelector('.change');
function resize() {
  if((window.innerWidth<500)&&(changeText.textContent="Frequently Asked Questions (FAQ)")){
    changeText.textContent="FAQ";
  } else {
    changeText.textContent="Frequently Asked Questions (FAQ)";
  }
}
window.onresize = resize;
</script>

document.addEventListener('transitionend', function(e) {
  if ($(e.target).is("div")) {
    $("div").text("width: "+$("div").width());
  }
});
$("div").css({"width":"150px"});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width: 100px;transition-delay: 0.000000001s;">width: 100</div>

매우 간단한 구현.

    <script>
    var move = function(e) {
        if ((e.w && e.w !== e.offsetWidth) || (e.h && e.h !== e.offsetHeight)) {
            new Function(e.getAttribute('onresize')).call(e);
        }
        e.w = e.offsetWidth;
        e.h = e.offsetHeight;
    }
    var resize = function() {
        console.log('Resized')
    }
    </script>

    <style>
    .resizable {
        resize: both;
        overflow: auto;
        width: 200px;
        border: 1px solid black;
        padding: 20px;
    }
    </style>

    <div class='resizable' onresize="resize(this)" onmousemove="move(this)">
      Pure vanilla implementation
    </div>

div 자체의 크기를 조정하려면 css 스타일로 지정해야 합니다.오버플로를 추가하고 속성 크기를 조정해야 합니다.

아래는 나의 코드 스니펫입니다.

#div1 {
        width: 90%;
        height: 350px;
        padding: 10px;
        border: 1px solid #aaaaaa;
        overflow: auto;
        resize: both;
    }

<div id="div1">

</div>

언급URL : https://stackoverflow.com/questions/10086693/resize-on-div-element