正在使用Javascript调整检测元素的大小

Question

使用CSS的调整大小规则，可以允许元素调整大小，如下所示：

.someClass {
resize: vertical/horizontal/both
}

然而，我找不到一种方法来检测一个元素正在被调整大小。

HTML"拖放API"具有内置的事件来检测拖动，这些事件记录在这里。

有没有类似的方法可以检测元素何时被拖动，或者制作自己的版本？

Answer 1

您需要通过选择器获取元素。例如：

const element = document.querySelector('.someClass');

然后你可以使用resizeObserver:

const resizeObserver = new ResizeObserver((entries) => {
for (let entry of entries) {
console.log(entry)
}
console.log('Size changed');

});
resizeObserver.observe(element);

有关更多资源：https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver