要获得动态大小的div的新大小,可以通过以下步骤实现:
以下是一个示例代码,演示如何实现获取动态大小的div的新大小:
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<script>
const myDiv = document.getElementById('myDiv');
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const newWidth = entry.contentRect.width;
const newHeight = entry.contentRect.height;
console.log('New size:', newWidth, newHeight);
// 在这里可以根据需要对新大小进行进一步处理
}
});
resizeObserver.observe(myDiv);
</script>
</body>
</html>
在上述示例中,我们创建了一个宽高为200px的div,并使用ResizeObserver API监听其大小变化。当div的大小发生变化时,回调函数会打印出新的宽度和高度。你可以根据实际需求,在回调函数中进行相应的处理。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云