я хочу вызывать js функцию при изменении размеров элемента, по аналогии $(window).resize(function(){});
, но к сожалению это не работает для:$(element).resize(function(){});
. Подозреваю, это потому что элемент имеет не те параметры объекта, что необходимы. Или может вы знаете какой либо хак? Думаю ещё можно попробовать с асинхронной функцией, которая будет сравнивать их размеры "в лоб". Кто сталкивался?
-
stackoverflow.com/questions/10086693/resize-on-div-element– xydopeCommented 10 окт. 2021 в 6:03
Добавить комментарий
|
1 ответ
Можно использовать ResizeObserver
let test = document.querySelector('.test');
let result = document.querySelector('.result');
const resizeObserver = new ResizeObserver((entries, observer) => {
for (let entry of entries) {
if (entry.contentBoxSize) {
let cr = entry.contentRect;
let bs = entry.contentBoxSize;
console.log(bs);
console.log(cr);
result.innerHTML = `width: ${cr.width} <br> height: ${cr.height} <br> padding-top: ${cr.top} <br> padding-left: ${cr.left}`;
}
}
})
resizeObserver.observe(test);
.test {
background: blueviolet;
padding: 10px;
color: white;
margin-bottom: 20px;
border: 2px solid #333;
}
<div class='test'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
<div class="result"></div>