다음 샘플 HTML을 사용했는데 너비가 100 % 인 DIV가 있습니다. 일부 요소가 포함되어 있습니다. 창 크기 조정을 수행하는 동안 내부 요소의 위치가 변경되고 div의 크기가 변경 될 수 있습니다. div의 치수 변경 이벤트를 연결할 수 있는지 묻고 있습니까? 어떻게합니까? 현재 타겟 DIV의 jQuery 크기 조정 이벤트에 콜백 함수를 바인딩하지만 콘솔 로그가 출력되지 않습니다. 아래를 참조하십시오.
<html>
<head>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" language="javascript">
$('#test_div').bind('resize', function(){
console.log('resized');
});
</script>
</head>
<body>
<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
<input type="button" value="button 1" />
<input type="button" value="button 2" />
<input type="button" value="button 3" />
</div>
</body>
</html>
- 답변 # 1
- 답변 # 2
Chrome 64에서 사용할 수있는 Resize Observer API입니다.
function outputsize() { width.value = textbox.offsetWidth height.value = textbox.offsetHeight } outputsize() new ResizeObserver(outputsize).observe(textbox)
Width: <output id="width">0</output><br> Height: <output id="height">0</output><br> <textarea id="textbox">Resize me</textarea><br>
사양 : https://wicg.github.io/ResizeObserver
폴리 필 : https://github.com/WICG/ResizeObserver/issues/3
Firefox 문제 : https://bugzil.la/1272409
사파리 문제 : http://wkb.ug/157743
현재 지원 : http://caniuse.com/#feat=resizeobserver
- 답변 # 3
resize
를 바인딩해야합니다window
의 이벤트 일반 html 요소가 아닌 객체입니다.이것을 사용할 수 있습니다 :
$(window).resize(function() { ... });
div
의 새로운 너비를 확인할 수 있습니다 전화$('.a-selector').width();
따라서 질문에 대한 답변은아니요이므로
resize
를 바인딩 할 수 없습니다. div에 이벤트를 전달하십시오. - 답변 # 4
장기적으로 ResizeObserver를 사용할 수 있습니다.
new ResizeObserver(callback).observe(element);
안타깝게도 현재 많은 브라우저에서 기본적으로 지원되지 않습니다.
그 동안 다음과 같은 기능을 사용할 수 있습니다. 요소 크기 변경의 대부분은 DOM 크기 조정 또는 DOM의 창 크기 변경에서 비롯됩니다. 창의 크기 조정 이벤트를 사용하여 창 크기 조정을 청취 할 수 있으며 MutationObserver를 사용하여 DOM 변경 사항을 청취 할 수 있습니다.
다음은 이벤트의 결과로 제공된 요소의 크기가 변경 될 때 다시 호출하는 함수의 예입니다.
var onResize = function(element, callback) { if (!onResize.watchedElementData) { // First time we are called, create a list of watched elements // and hook up the event listeners. onResize.watchedElementData = []; var checkForChanges = function() { onResize.watchedElementData.forEach(function(data) { if (data.element.offsetWidth !== data.offsetWidth || data.element.offsetHeight !== data.offsetHeight) { data.offsetWidth = data.element.offsetWidth; data.offsetHeight = data.element.offsetHeight; data.callback(); } }); }; // Listen to the window's size changes window.addEventListener('resize', checkForChanges); // Listen to changes on the elements in the page that affect layout var observer = new MutationObserver(checkForChanges); observer.observe(document.body, { attributes: true, childList: true, characterData: true, subtree: true }); } // Save the element we are watching onResize.watchedElementData.push({ element: element, offsetWidth: element.offsetWidth, offsetHeight: element.offsetHeight, callback: callback }); };
- 답변 # 5
ResizeSensor.js는 거대한 라이브러리의 일부이지만 기능을THIS:
function ResizeSensor(element, callback) { let zIndex = parseInt(getComputedStyle(element)); if(isNaN(zIndex)) { zIndex = 0; }; zIndex--; let expand = document.createElement('div'); expand.style.position = "absolute"; expand.style.left = "0px"; expand.style.top = "0px"; expand.style.right = "0px"; expand.style.bottom = "0px"; expand.style.overflow = "hidden"; expand.style.zIndex = zIndex; expand.style.visibility = "hidden"; let expandChild = document.createElement('div'); expandChild.style.position = "absolute"; expandChild.style.left = "0px"; expandChild.style.top = "0px"; expandChild.style.width = "10000000px"; expandChild.style.height = "10000000px"; expand.appendChild(expandChild); let shrink = document.createElement('div'); shrink.style.position = "absolute"; shrink.style.left = "0px"; shrink.style.top = "0px"; shrink.style.right = "0px"; shrink.style.bottom = "0px"; shrink.style.overflow = "hidden"; shrink.style.zIndex = zIndex; shrink.style.visibility = "hidden"; let shrinkChild = document.createElement('div'); shrinkChild.style.position = "absolute"; shrinkChild.style.left = "0px"; shrinkChild.style.top = "0px"; shrinkChild.style.width = "200%"; shrinkChild.style.height = "200%"; shrink.appendChild(shrinkChild); element.appendChild(expand); element.appendChild(shrink); function setScroll() { expand.scrollLeft = 10000000; expand.scrollTop = 10000000; shrink.scrollLeft = 10000000; shrink.scrollTop = 10000000; }; setScroll(); let size = element.getBoundingClientRect(); let currentWidth = size.width; let currentHeight = size.height; let onScroll = function() { let size = element.getBoundingClientRect(); let newWidth = size.width; let newHeight = size.height; if(newWidth != currentWidth || newHeight != currentHeight) { currentWidth = newWidth; currentHeight = newHeight; callback(); } setScroll(); }; expand.addEventListener('scroll', onScroll); shrink.addEventListener('scroll', onScroll); };
사용 방법 :
let container = document.querySelector(".container"); new ResizeSensor(container, function() { console.log("dimension changed:", container.clientWidth, container.clientHeight); });
관련 자료
- javascript - contenteditable div의 내용이 변경되었는지 감지하는 방법
- c# - 하위 속성이 변경되었는지 감지하는 방법
- java - 목록이 변경되었는지 감지하는 방법?
- winforms - 사용자가 C #의 DataGridView에서 열 위치를 변경 한 시점을 감지하는 이벤트
- ANGULAR - 모난, 딱딱한, 모서리가있는, 각도의, 뼈가 앙상한 - html 템플릿이 변경되었는지 감지하는 방법?
- Typescript가 메소드에 의해 변경되는 특성을 감지하지 못합니다
- javascript - 변경된 변수를 감지하고 콜백을 실행하는 가장 효율적인 방법
- python - 문자열이 변경되었는지 감지하는 방법
- javascript : iFrame의 요소가 Client-View에 있는지 감지
- javascript : 내 프로젝트에이 로더를 어떻게 구현할 수 있습니까?
- javascript : html /css 갤러리 div-줄에 텍스트를 표시하는 방법
- javascript : 부트 스트랩 팝 오버에 '닫기 버튼'삽입 [중복]
- javascript : 페이지를 계속하기 위해 DIV 내부를 스크롤 할 수는 없지만 휴대폰 본문의 외부에서만 가능합니다.
- javascript : AngularJs를 사용하여 Div 콘텐츠 인쇄
- javascript : IFrame의 srcdoc에있는 codemirror 편집기가 변경 될 때 IFrame mithril 요소에서 onchange 이벤트를 트리거하는 방법은 무엇입니까?
- javascript : html /js : 동일한 스크롤 위치에서 이전 페이지로 돌아 가기
- javascript : 축소판 이미지를 캡처하려고 할 때 변경 사항에 jquery가 아무것도하지 않음
- javascript : 다른 장치에서 애니메이션의 텍스트간에 전환하는 방법은 무엇입니까? html /css
요소의 크기가 변경되었는지 확인하는 매우 효율적인 방법이 있습니다.
http://marcj.github.io/css-element-queries/
이 도서관에는
ResizeSensor
클래스가 있습니다 크기 조정 감지에 사용할 수 있습니다.이벤트 기반 접근 방식을 사용하므로 빠르며 CPU 시간을 낭비하지 않습니다.
예 :
setTimeout()
를 사용하므로jQuery onresize 플러그인을 사용하지 마십시오 변경 사항을 확인하기 위해 루프.이것은 매우 느리고 정확하지 않습니다.
공개 :이 라이브러리와 직접 연결되어 있습니다.