DIV의 치수가 변경된 것을 감지하는 방법
아래 샘플 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>
새로운 표준으로 Rize 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://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API
사양 : https://wicg.github.io/ResizeObserver
현재 지원: http://caniuse.com/ #syslog=syslogobserver
폴리필: https://github.com/pelotoncycle/resize-observer https://github.com/que-etc/resize-observer-polyfill
요소의 크기가 변경되었는지 확인하는 매우 효율적인 방법이 있습니다.
http://marcj.github.io/css-element-queries/
이 라이브러리에는 크기 조정 탐지에 사용할 수 있는 클래스가 있습니다.
이벤트 베이스의 어프로치를 채용하고 있기 때문에, 고속으로 CPU의 시간을 낭비하지 않습니다.
예:
new ResizeSensor(jQuery('#divId'), function(){
console.log('content dimension changed');
});
jQuery onresize 플러그인은 사용할 수 없습니다.setTimeout() DOM 와의 clientHeight/clientWidth루프의 속성을 지정하여 변경을 확인합니다.
레이아웃 스레싱의 원인이 되기 때문에 매우 느리고 정확하지 않습니다.
공개:나는 이 도서관과 직결되어 있다.
장기적으로는 를 사용할 수 있게 됩니다.
new ResizeObserver(callback).observe(element);
안타깝게도 현재 많은 브라우저에서 기본적으로 지원되지 않습니다.
한편, 다음과 같은 함수를 사용할 수 있습니다.요소 크기 변경의 대부분은 창 크기 조정 또는 DOM 내의 변경에서 발생합니다.창의 크기 조정 이벤트로 창 크기 조정 및 를 사용하여 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
});
};
Resize Sensor.js는 큰 라이브러리의 일부이지만 이 기능을 다음과 같이 줄였습니다.
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);
});
.setTimeout()퍼포먼스를 저하시킬 수 있는 해킹!대신 DOM RizeObserver 메서드를 사용하여 Div 크기 변경을 청취할 수 있습니다.
const myObserver = new ResizeObserver(entries => {
// this will get called whenever div dimension changes
entries.forEach(entry => {
console.log('width', entry.contentRect.width);
console.log('height', entry.contentRect.height);
});
});
const someEl = document.querySelector('.some-element');
// start listening to changes
myObserver.observe(someEl);
// later, stop listening to changes
myObserver.disconnect();
MutationObserver를 사용한 오래된 응답:
HTML 요소 속성, 하위 트리 및 클래스 변경을 청취하는 경우:
JS:
var observer = new MutationObserver(function(mutations) {
console.log('size changed!');
});
var target = document.querySelector('.mydiv');
observer.observe(target, {
attributes: true,
childList: true,
subtree: true
});
HTML:
<div class='mydiv'>
</div>
여기 바이올린..div 사이즈를 변경해 보겠습니다.
효율성을 높이기 위해 메서드를 추가로 래핑할 수 있습니다. debounce는 DIV의 크기를 조정하는 밀리초마다 트리거하는 것이 아니라 x밀리초마다 메서드를 트리거합니다.
묶어야 요.resize의 window오젝 html html 、 html 、 html 、 html 、 html 。
그 후 다음을 사용할 수 있습니다.
$(window).resize(function() {
...
});
할 수 .div(Calling)
$('.a-selector').width();
그래서 당신의 질문에 대한 대답은 '아니오'입니다.resize디바에게 이벤트를 하다.
가장 좋은 해결책은 이른바 요소 쿼리를 사용하는 것입니다.그러나 표준 규격이 아니며 규격이 존재하지 않으며, 유일한 옵션은 사용할 수 있는 폴리필/라이브러리 중 하나를 사용하는 것입니다.
요소 쿼리 뒤에 있는 아이디어는 페이지의 특정 컨테이너가 해당 컨테이너에 제공된 공간에 응답할 수 있도록 하는 것입니다.이렇게 하면 컴포넌트를 한 번 쓴 후 페이지 아무 곳에나 놓을 수 있으며, 내용을 현재 크기로 조정할 수 있습니다.윈도우 크기에 관계없이.이것이 요소 쿼리와 미디어 쿼리의 첫 번째 차이입니다.누구나 언젠가는 요소 쿼리(또는 동일한 목표를 달성하는 것)를 표준화하여 네이티브하고 깔끔하고 단순하며 견고하게 만드는 규격이 만들어지길 바랍니다.대부분의 사람들은 미디어 쿼리가 매우 제한적이며 모듈러 설계와 진정한 응답성을 위해 도움이 되지 않는다는 데 동의합니다.
다양한 방법으로 문제를 해결하는 몇 가지 폴리필/라이브러리가 있습니다(솔루션 대신 회피책이라고 할 수 있습니다).
- CSS 요소 쿼리 - https://github.com/marcj/css-element-queries
- BoomQueries - https://github.com/BoomTownROI/boomqueries
- eq.http://https://github.com/Snugug/eq.js
- Element Query - https://github.com/tysonmatanich/elementQuery
- 그리고 몇 가지 더, 여기에 나열하지는 않겠지만 검색은 자유롭게 할 수 있습니다.현재 이용 가능한 옵션 중 어떤 것이 가장 좋은지 말할 수 없습니다.몇 가지 시도해 보고 결정해 보세요.
나는 비슷한 문제에 대해 제안된 다른 해결책을 보았다.일반적으로 타이머 또는 후드 아래에 있는 윈도우/뷰포트 크기를 사용합니다.이것은 실제 솔루션이 아닙니다.또한, 이상적으로는 Javascript나 html이 아니라 주로 CSS로 해결하는 것이 좋다고 생각합니다.
MarcJ의 솔루션이 작동하지 않을 때 이 라이브러리가 작동한다는 것을 알게 되었습니다.
https://github.com/sdecima/javascript-detect-element-resize
매우 경량이며, CSS 또는 HTML 로딩/렌더링을 통해 자연스러운 사이즈도 검출할 수 있습니다.
코드 샘플(링크에서 취득):
<script type="text/javascript" src="detect-element-resize.js"></script>
<script type="text/javascript">
var resizeElement = document.getElementById('resizeElement'),
resizeCallback = function() {
/* do something */
};
addResizeListener(resizeElement, resizeCallback);
removeResizeListener(resizeElement, resizeCallback);
</script>
http://benalman.com/code/projects/jquery-resize/examples/resize/ 를 봐 주세요.
다양한 예가 있습니다.창 크기를 조정하여 용기 요소 내부의 요소가 어떻게 조정되었는지 확인하십시오.
fielle을 합니다.js fielle 。
이 바이올린 http://jsfiddle.net/sgsqJ/4/을 보세요.
이 resize() 이벤트는 클래스 "test"가 있는 요소 및 윈도 오브젝트 및 윈도 오브젝트 $('test').resize()의 크기 조정 콜백에 바인드됩니다.
예.
$('#test_div').bind('resize', function(){
console.log('resized');
});
$(window).resize(function(){
$('#test_div').resize();
});
창 개체만 "크기 조정" 이벤트를 생성합니다.내가 아는 유일한 방법은 주기적으로 크기를 확인하는 인터벌 타이머를 실행하는 것이다.
하시면 됩니다.iframe ★★★★★★★★★★★★★★★★★」object를 사용합니다.contentWindow ★★★★★★★★★★★★★★★★★」contentDocument★★★★★★★★★★★★★★★★★★setInterval ★★★★★★★★★★★★★★★★★」setTimeout
순서:
- 를 「」로 설정합니다.
relative - 투명 절대 숨김 IFRAME 내부에 추가
IFRAME.contentWindow-onresize
HTML의 예:
<div style="height:50px;background-color:red;position:relative;border:1px solid red">
<iframe style=width:100%;height:100%;position:absolute;border:none;background-color:transparent allowtransparency=true>
</iframe>
This is my div
</div>
Javascript:
$('div').width(100).height(100);
$('div').animate({width:200},2000);
$('object').attr({
type : 'text/html'
})
$('object').on('resize,onresize,load,onload',function(){
console.log('ooooooooonload')
})
$($('iframe')[0].contentWindow).on('resize',function(){
console.log('div changed')
})
실행 예시
JsFiddle : https://jsfiddle.net/qq8p470d/
상세보기:
var div = document.getElementById('div');
div.addEventListener('resize', (event) => console.log(event.detail));
function checkResize (mutations) {
var el = mutations[0].target;
var w = el.clientWidth;
var h = el.clientHeight;
var isChange = mutations
.map((m) => m.oldValue + '')
.some((prev) => prev.indexOf('width: ' + w + 'px') == -1 || prev.indexOf('height: ' + h + 'px') == -1);
if (!isChange)
return;
var event = new CustomEvent('resize', {detail: {width: w, height: h}});
el.dispatchEvent(event);
}
var observer = new MutationObserver(checkResize);
observer.observe(div, {attributes: true, attributeOldValue: true, attributeFilter: ['style']});#div {width: 100px; border: 1px solid #bbb; resize: both; overflow: hidden;}<div id = "div">DIV</div>놀랍게도 이 문제는 오래되었지만 대부분의 브라우저에서 여전히 문제가 되고 있습니다.
다른 사람들이 말했듯이, Chrome 64+는 현재 Rize Observes와 함께 기본적으로 출하되고 있지만, 사양은 여전히 미세 조정 중이며 Chrome은 현재(2019년 1월 29일 현재) 사양의 최신판보다 늦어지고 있습니다.
야생에서 RizeObserver 폴리필을 몇 개 본 적이 있지만, 일부는 근접한 사양에 따르지 않고 다른 일부는 계산에 문제가 있습니다.
어떤 애플리케이션에서도 사용할 수 있는 응답성이 뛰어난 웹 컴포넌트를 만들기 위해 이 동작이 절실히 필요했습니다.잘 작동시키려면 항상 치수를 알아야 하기 때문에 RizeObservers가 이상적으로 들렸고 가능한 한 사양에 가까운 폴리필을 작성하기로 했습니다.
레포: https://github.com/juggle/resize-observer
데모: https://codesandbox.io/s/myqzvpmmy9
Clay.js(https://github.com/zzarcon/clay)를 사용하면 요소의 크기 변화를 쉽게 감지할 수 있습니다.
var el = new Clay('.element');
el.on('resize', function(size) {
console.log(size.height, size.width);
});
다음은 @nkron에 의한 솔루션의 단순화된 버전으로, 단일 요소에 적용할 수 있습니다(@nkron의 답변에 포함된 일련의 요소가 아니라 복잡성이 필요 없음).
function onResizeElem(element, callback) {
// Save the element we are watching
onResizeElem.watchedElementData = {
element: element,
offsetWidth: element.offsetWidth,
offsetHeight: element.offsetHeight,
callback: callback
};
onResizeElem.checkForChanges = function() {
const data = onResizeElem.watchedElementData;
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 resize event
window.addEventListener('resize', onResizeElem.checkForChanges);
// Listen to the element being checked for width and height changes
onResizeElem.observer = new MutationObserver(onResizeElem.checkForChanges);
onResizeElem.observer.observe(document.body, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
이벤트 리스너와 옵서버는 다음 방법으로 삭제할 수 있습니다.
window.removeEventListener('resize', onResizeElem.checkForChanges);
onResizeElem.observer.disconnect();
이 블로그 투고는 DOM 요소의 크기 변화를 효율적으로 감지하는 데 도움이 되었습니다.
http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/
이 코드 사용 방법...
AppConfig.addResizeListener(document.getElementById('id'), function () {
//Your code to execute on resize.
});
예제에 사용된 패키지 코드...
var AppConfig = AppConfig || {};
AppConfig.ResizeListener = (function () {
var attachEvent = document.attachEvent;
var isIE = navigator.userAgent.match(/Trident/);
var requestFrame = (function () {
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
function (fn) { return window.setTimeout(fn, 20); };
return function (fn) { return raf(fn); };
})();
var cancelFrame = (function () {
var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
window.clearTimeout;
return function (id) { return cancel(id); };
})();
function resizeListener(e) {
var win = e.target || e.srcElement;
if (win.__resizeRAF__) cancelFrame(win.__resizeRAF__);
win.__resizeRAF__ = requestFrame(function () {
var trigger = win.__resizeTrigger__;
trigger.__resizeListeners__.forEach(function (fn) {
fn.call(trigger, e);
});
});
}
function objectLoad(e) {
this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
this.contentDocument.defaultView.addEventListener('resize', resizeListener);
}
AppConfig.addResizeListener = function (element, fn) {
if (!element.__resizeListeners__) {
element.__resizeListeners__ = [];
if (attachEvent) {
element.__resizeTrigger__ = element;
element.attachEvent('onresize', resizeListener);
} else {
if (getComputedStyle(element).position === 'static') element.style.position = 'relative';
var obj = element.__resizeTrigger__ = document.createElement('object');
obj.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
obj.__resizeElement__ = element;
obj.onload = objectLoad;
obj.type = 'text/html';
if (isIE) element.appendChild(obj);
obj.data = 'about:blank';
if (!isIE) element.appendChild(obj);
}
}
element.__resizeListeners__.push(fn);
};
AppConfig.removeResizeListener = function (element, fn) {
element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
if (!element.__resizeListeners__.length) {
if (attachEvent) element.detachEvent('onresize', resizeListener);
else {
element.__resizeTrigger__.contentDocument.defaultView.removeEventListener('resize', resizeListener);
element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
}
}
}
})();
주의: AppConfig는 재사용 가능한 기능을 정리하기 위해 사용하는 네임스페이스/개체입니다.자유롭게 검색하여 원하는 이름으로 대체하십시오.
은 my jQuery뿐만 합니다.window.
https://github.com/dustinpoissant/ResizeTriggering
$("#myElement") .resizeTriggering().on("resize", function(e){
// Code to handle resize
});
다음 스니펫의 코드를 사용해 볼 수 있습니다.플레인 Javascript를 사용하여 고객의 요구를 커버합니다.(코드 스니펫을 실행하고 full page 링크를 클릭하면 div의 사이즈가 변경된다는 경고가 표시됩니다).
이 '일부러'라는
setInterval것은, 제 굶주리지 수 있습니다 있던 탭의 1%가되었습니다.)100 밀리초, PC CPU의 합계입니다., div만을 이 수 .대량의 요소에 대해 이 작업을 수행하려면 CPU가 많이 필요할 수 있습니다.언제든지 클릭 이벤트를 사용하여 크기 조정 스니핑을 중지할 수 있습니다.
var width = 0;
var interval = setInterval(function(){
if(width <= 0){
width = document.getElementById("test_div").clientWidth;
}
if(document.getElementById("test_div").clientWidth!==width) {
alert('resized div');
width = document.getElementById("test_div").clientWidth;
}
}, 100);<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>바이올린도 확인하실 수 있습니다.
갱신하다
var width = 0;
function myInterval() {
var interval = setInterval(function(){
if(width <= 0){
width = document.getElementById("test_div").clientWidth;
}
if(document.getElementById("test_div").clientWidth!==width) {
alert('resized');
width = document.getElementById("test_div").clientWidth;
}
}, 100);
return interval;
}
var interval = myInterval();
document.getElementById("clickMe").addEventListener( "click" , function() {
if(typeof interval!=="undefined") {
clearInterval(interval);
alert("stopped div-resize sniffing");
}
});
document.getElementById("clickMeToo").addEventListener( "click" , function() {
myInterval();
alert("started div-resize sniffing");
});<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
<input type="button" value="button 1" id="clickMe" />
<input type="button" value="button 2" id="clickMeToo" />
<input type="button" value="button 3" />
</div>업데이트된 바이올린
이것은 상위 답변과 거의 일치하지만 링크 대신 IMO가 읽기 쉽고 이해하기 쉽도록 변환된 코드의 일부일 뿐입니다.기타 몇 가지 작은 변경 사항으로는 cloneNode()를 사용하거나 html을 js 문자열에 넣지 않는 것이 있습니다.작은 거지만 그대로 복사해서 붙여넣으면 돼요
이 방법은 두 개의 보이지 않는 Div를 보고 있는 요소를 채운 다음 각각에 트리거를 넣고 크기가 변경되면 스크롤 변경을 트리거하는 스크롤 위치를 설정하는 것입니다.
모든 실제 크레딧은 Marc J에 귀속되지만, 관련 코드만 찾으신다면 다음과 같습니다.
window.El = {}
El.resizeSensorNode = undefined;
El.initResizeNode = function() {
var fillParent = "display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;";
var triggerStyle = "position: absolute; left: 0; top: 0; transition: 0s;";
var resizeSensor = El.resizeSensorNode = document.createElement("resizeSensor");
resizeSensor.style = fillParent;
var expandSensor = document.createElement("div");
expandSensor.style = fillParent;
resizeSensor.appendChild(expandSensor);
var trigger = document.createElement("div");
trigger.style = triggerStyle;
expandSensor.appendChild(trigger);
var shrinkSensor = expandSensor.cloneNode(true);
shrinkSensor.firstChild.style = triggerStyle + " width: 200%; height: 200%";
resizeSensor.appendChild(shrinkSensor);
}
El.onSizeChange = function(domNode, fn) {
if (!domNode) return;
if (domNode.resizeListeners) {
domNode.resizeListeners.push(fn);
return;
}
domNode.resizeListeners = [];
domNode.resizeListeners.push(fn);
if(El.resizeSensorNode == undefined)
El.initResizeNode();
domNode.resizeSensor = El.resizeSensorNode.cloneNode(true);
domNode.appendChild(domNode.resizeSensor);
var expand = domNode.resizeSensor.firstChild;
var expandTrigger = expand.firstChild;
var shrink = domNode.resizeSensor.childNodes[1];
var reset = function() {
expandTrigger.style.width = '100000px';
expandTrigger.style.height = '100000px';
expand.scrollLeft = 100000;
expand.scrollTop = 100000;
shrink.scrollLeft = 100000;
shrink.scrollTop = 100000;
};
reset();
var hasChanged, frameRequest, newWidth, newHeight;
var lastWidth = domNode.offsetWidth;
var lastHeight = domNode.offsetHeight;
var onResized = function() {
frameRequest = undefined;
if (!hasChanged) return;
lastWidth = newWidth;
lastHeight = newHeight;
var listeners = domNode.resizeListeners;
for(var i = 0; listeners && i < listeners.length; i++)
listeners[i]();
};
var onScroll = function() {
newWidth = domNode.offsetWidth;
newHeight = domNode.offsetHeight;
hasChanged = newWidth != lastWidth || newHeight != lastHeight;
if (hasChanged && !frameRequest) {
frameRequest = requestAnimationFrame(onResized);
}
reset();
};
expand.addEventListener("scroll", onScroll);
shrink.addEventListener("scroll", onScroll);
}
순수 Javascript 솔루션이지만 css 크기 조정 버튼으로 요소의 크기를 조정해야 작동합니다.
- 요소 크기를 오프셋폭 및 오프셋과 함께 저장높이
- 이 요소에 클릭 이벤트 청취자를 추가합니다.
- curent를 합니다.
offsetWidth★★★★★★★★★★★★★★★★★」offsetHeight값을 저장하고 다른 경우 원하는 작업을 수행하여 값을 업데이트합니다.
jQuery(document).ready( function($) {
function resizeMapDIVs() {
// check the parent value...
var size = $('#map').parent().width();
if( $size < 640 ) {
// ...and decrease...
} else {
// ..or increase as necessary
}
}
resizeMapDIVs();
$(window).resize(resizeMapDIVs);
});
Bharat Patil answer를 사용하면 최대 스택오류를 방지하기 위해 바인드콜백 내에서 false를 반환할 뿐입니다.다음 예를 참조해 주십시오.
$('#test_div').bind('resize', function(){
console.log('resized');
return false;
});
이건 정말 오래된 질문이지만, 이 문제에 대한 해결책을 올려야겠다고 생각했어요.
사용하려고 했습니다.ResizeSensor그런데 해 보니 쿼리의 위치가 합니다.relative ★★★★★★★★★★★★★★★★★」absolute네, 네.
결국 스트레이트 대신 Rxjs로 처리하게 되었습니다.setTimeout ★★★★★★★★★★★★★★★★★」requestAnimationFrame이전 구현과 마찬가지로요.
간격의 관찰 가능한 플레이버의 장점은 스트림을 수정할 수 있지만 다른 관찰 가능한 플레이버는 처리할 수 있다는 것입니다.기본적인 실장만으로 충분했습니다만, 미쳐 버릴 수도 있고, 모든 종류의 합병을 실시할 수도 있습니다.
다음 예제에서는 안쪽(녹색) div의 폭 변화를 추적하고 있습니다.폭은 50%로 설정되지만 최대 폭은 200px입니다.슬라이더를 끌면 래퍼(회색) div의 폭에 영향을 줍니다.관측 가능한 값은 내부 div의 폭이 변경되었을 때만 발생하며, 외부 div의 폭이 400px보다 작을 경우에만 발생한다는 것을 알 수 있습니다.
const { interval } = rxjs;
const { distinctUntilChanged, map, filter } = rxjs.operators;
const wrapper = document.getElementById('my-wrapper');
const input = document.getElementById('width-input');
function subscribeToResize() {
const timer = interval(100);
const myDiv = document.getElementById('my-div');
const widthElement = document.getElementById('width');
const isMax = document.getElementById('is-max');
/*
NOTE: This is the important bit here
*/
timer
.pipe(
map(() => myDiv ? Math.round(myDiv.getBoundingClientRect().width) : 0),
distinctUntilChanged(),
// adding a takeUntil(), here as well would allow cleanup when the component is destroyed
)
.subscribe((width) => {
widthElement.innerHTML = width;
isMax.innerHTML = width === 200 ? 'Max width' : '50% width';
});
}
function defineRange() {
input.min = 200;
input.max = window.innerWidth;
input.step = 10;
input.value = input.max - 50;
}
function bindInputToWrapper() {
input.addEventListener('input', (event) => {
wrapper.style.width = `${event.target.value}px`;
});
}
defineRange();
subscribeToResize();
bindInputToWrapper();.inner {
width: 50%;
max-width: 200px;
}
/* Aesthetic styles only */
.inner {
background: #16a085;
}
.wrapper {
background: #ecf0f1;
color: white;
margin-top: 24px;
}
.content {
padding: 12px;
}
body {
font-family: sans-serif;
font-weight: bold;
}<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>
<h1>Resize Browser width</h1>
<label for="width-input">Adjust the width of the wrapper element</label>
<div>
<input type="range" id="width-input">
</div>
<div id="my-wrapper" class="wrapper">
<div id="my-div" class="inner">
<div class="content">
Width: <span id="width"></span>px
<div id="is-max"></div>
</div>
</div>
</div>@gman에 의해 이 답변이 확장됩니다.여기에서는 요소별로 여러 개의 콜백을 허용하여 폭과 높이를 준이벤트 오브젝트로 확장할 수 있는 함수가 있습니다.스택 오버플로우에서 라이브로 동작하는 임베디드 데모 보기(메인 브라우저의 크기를 대폭 조정해야 트리거할 수 있음)
function elementResizeWatcher(element, callback) {
var
resolve=function(element) {
return (typeof element==='string'
? document[
['.','#'].indexOf(element.charAt(0)) < 0 ? "getElementById" : "querySelector"
] (element)
: element);
},
observer,
watched = [],
checkForElementChanges = function (data) {
var w=data.el.offsetWidth,h=data.el.offsetHeight;
if (
data.offsetWidth !== w ||
data.offsetHeight !== h
) {
data.offsetWidth = w;
data.offsetHeight = h;
data.cb({
target : data.el,
width : w,
height : h
});
}
},
checkForChanges=function(){
watched.forEach(checkForElementChanges);
},
started=false,
self = {
start: function () {
if (!started) {
// Listen to the window resize event
window.addEventListener("resize", checkForChanges);
// Listen to the element being checked for width and height changes
observer = new MutationObserver(checkForChanges);
observer.observe(document.body, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
started=true;
}
},
stop : function ( ) {
if (started) {
window.removeEventListener('resize', checkForChanges);
observer.disconnect();
started = false;
}
},
addListener : function (element,callback) {
if (typeof callback!=='function')
return;
var el = resolve(element);
if (typeof el==='object') {
watched.push({
el : el,
offsetWidth : el.offsetWidth,
offsetHeight : el.offsetHeight,
cb : callback
});
}
},
removeListener : function (element,callback) {
var
el = resolve(element);
watched = watched.filter(function(data){
return !((data.el===el) && (data.cb===callback));
});
}
};
self.addListener(element,callback);
self.start();
return self;
}
var watcher = elementResizeWatcher("#resize_me_on_stack_overflow", function(e){
e.target.innerHTML="i am "+e.width+"px x "+e.height+"px";
});
watcher.addListener(".resize_metoo",function(e) {
e.target.innerHTML="and i am "+e.width+"px x "+e.height+"px";
});
var mainsize_info = document.getElementById("mainsize");
watcher.addListener(document.body,function(e) {
mainsize_info.innerHTML=e.width+"px x "+e.height+"px";
});#resize_me_on_stack_overflow{
background-color:lime;
}
.resize_metoo {
background-color:yellow;
font-size:36pt;
width:50%;
}<p> resize the main browser window! <span id="mainsize"><span> </p>
<p id="resize_me_on_stack_overflow">
hey, resize me.
</p>
<p class="resize_metoo">
resize me too.
</p>완전한 바닐라 구현.
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(e) {
e.innerText = 'New dimensions: ' + e.w + ',' + e.h;
}.resizable {
resize: both;
overflow: auto;
width: 200px;
border: 1px solid black;
padding: 20px;
}<div class='resizable' onresize="resize(this)" onmousemove="move(this)">
Pure vanilla implementation
</div>★★★★★★★★★★★★★★★★ disconnect「 」 、 「 」 、 「 」:
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["input", "context", "output"]
connect() {
this.inputObserver = new ResizeObserver(() => { this.resizeInput() })
this.inputObserver.observe(this.inputTarget)
}
disconnect() {
this.inputObserver.disconnect(this.inputTarget)
}
resizeInput() {
const height = this.inputTarget.offsetHeight
this.contextTarget.style.height = `${height}px`
this.outputTarget.style.height = `${height}px`
}
}
만.Window.onResize하지만 항상 할 수 .IFrame 것을 내다Window오브젝트를 지정합니다.
이 답변을 확인해 주세요.휴대하기 쉽고 사용하기 쉬운 새로운 작은 jquery 플러그인이 있습니다.소스코드는 언제든지 확인할 수 있습니다.
<!-- (1) include plugin script in a page -->
<script src="/src/jquery-element-onresize.js"></script>
// (2) use the detectResizing plugin to monitor changes to the element's size:
$monitoredElement.detectResizing({ onResize: monitoredElement_onResize });
// (3) write a function to react on changes:
function monitoredElement_onResize() {
// logic here...
}
할 수 없다고 생각했지만, 그 후 style="both: both;"를 통해 수동으로 div 크기를 조정할 수 있기 때문에 클릭할 수 있는 온클릭 기능이 추가되어 요소의 높이와 폭을 확인할 수 있게 되었습니다.순수 javascript 5줄(더 짧을 수도 있음) http://codepen.io/anon/pen/eNyyVN
<div id="box" style="
height:200px;
width:640px;
background-color:#FF0066;
resize: both;
overflow: auto;"
onclick="myFunction()">
<p id="sizeTXT" style="
font-size: 50px;">
WxH
</p>
</div>
<p>This my example demonstrates how to run a resize check on click for resizable div.</p>
<p>Try to resize the box.</p>
<script>
function myFunction() {
var boxheight = document.getElementById('box').offsetHeight;
var boxhwidth = document.getElementById('box').offsetWidth;
var txt = boxhwidth +"x"+boxheight;
document.getElementById("sizeTXT").innerHTML = txt;
}
</script>
언급URL : https://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed
'source' 카테고리의 다른 글
| Android AudioRecord가 다른 스트림을 MIC 오디오 소스로 강제 전송 (0) | 2022.09.11 |
|---|---|
| Javascript에서 괄호 사이에 문자열을 가져오는 정규 표현식 (0) | 2022.09.11 |
| Vue.js를 사용한 Facebook 로그인 컴포넌트 및 증폭 (0) | 2022.09.11 |
| mysql 워크벤치를 도커 내 실행 중인 mysql에 연결하려면 어떻게 해야 합니까? (0) | 2022.09.11 |
| 마우스 "클릭"과 "클릭" (0) | 2022.09.11 |