如何获得动态大小的div的新大小？
要获得动态大小的div的新大小，可以通过以下步骤实现：
- 使用JavaScript监听div的大小变化事件。可以使用ResizeObserver API来实现监听，该API可以在div大小发生变化时触发回调函数。
- 在回调函数中，获取div的新大小。可以使用Element.getBoundingClientRect()方法来获取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的大小发生变化时，回调函数会打印出新的宽度和高度。你可以根据实际需求，在回调函数中进行相应的处理。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云产品：https://cloud.tencent.com/product
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cmysql
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 元宇宙（Tencent Real-Time 3D）：https://cloud.tencent.com/product/trtc
相关·内容
我有一个div，当一个按钮被点击时，它会从页面的底部滑上来。我使用css转换并更改div的css "top“属性来完成此操作。如果div大小从不改变，则可以正常工作。例如，如果div是400px高，我只需将它向上移动400px，它现在就在适当的位置。凉爽的。
但是..。如果div有动态生成的内容，并且每次都有不同的高度怎么办？我如何才能计算出要将
浏览 21提问于2019-07-27得票数 0
假设我的页面中有一个div，它没有手动设置width属性。那么，有没有可能使用javascript之类的东西从这个div中获得</
浏览 0提问于2011-01-21得票数 0
回答已采纳
我有一个AngularJS应用程序，其中有一个容器div，它将包含一些元素，我必须根据容器div中的可用空间动态调整大小。我需要那个div的大小(宽度和高度)，以便在控制器中进行计算。我如何获得</e
浏览 2提问于2015-12-18得票数 0
回答已采纳
1回答
>菜单中选择一个大小时.><span class="VariationProductSKU">052077.L</span>
我需要获得包含使用<span>的新的动态更新的SKU的jQuery标记的</
浏览 2提问于2013-10-22得票数 0
回答已采纳
3回答
当图像丢失时，需要以百分比显示div宽度。由于图像是动态加载的，所以我无法确定图像的大小。所有图像大小都以百分比表示。那么，当没有图像加载时，我们如何获得div的适当宽度呢？
这是演示。
浏览 0提问于2012-07-06得票数 0
2回答
当我试图获得图像的大小，以便我可以附加相同大小的div来解释图像。图像是动态的，所以我如何才能得到显示在浏览器上的图像大小，而不是图像的真实大小。我尝试了下面的代码，但当父类比图像小的时候不起作用。currentImg.attr('imgtext'); img.onload
浏览 0提问于2016-01-28得票数 0
我有一个ag网格，它正确地显示在div容器中并填充它。这仅仅是通过对'firstDataRenedered‘输出绑定事件调用firstDataRenedered()来完成的，当数据可用并被网格的rowData输入绑定绑定时，该事件只触发一次。凉爽的。我还可以调整网格所在的div容器的大小。但是，随着div的大小调整，网格不会自动填充它(注意，没有新的数据
浏览 1提问于2022-07-19得票数 0
1回答
我试图创建一个简单的幻灯片显示的图像，是设置在和背景div。我在创建幻灯片代码方面没有问题，但是我在定位应该根据其他监视器分辨率的宽度变化的图像方面有问题。
这是我想要放进红色div的图片，作为一个背景。分辨率为(1900 is X 500 Is)下面是我所做的一个模型。根据屏幕分辨率，我得到了从右边裁剪出
浏览 2提问于2014-02-19得票数 1
回答已采纳
2回答
我将有一个"div“，包括较小的图像，通过设置大小的"img”的手。然后点击或悬停，图像将显示在一个更大的"div"，小到图像本身，或大的窗口视图大小附近的鼠标指针。该代码将只有图像链接，并将得到实际的图像大小从那里。
设置预览者"div“的大小和位置对我来说只是一个数学问题。但
浏览 0提问于2018-04-30得票数 0
回答已采纳
1回答
我想要获得响应图像的高度(宽度:100%)来动态调整我的DIV的大小。关注这里的帖子
下面的代码显示了图像的实际高度，而不是图像在当前状态下的高度，我的意思是如果DIV宽度是200px，图像会自动调整大小，所以高度...但是下面的代码报告了实际的图像高度。如何获取图像当前高度(自动调整大小)的</em
浏览 0提问于2014-02-22得票数 2
1回答
我有几个宽度未知的div (动态宽度)。如何自动调整这些div的大小以适应浏览器的宽度？我如何使用html5和css3来实现它。我知道css3中有一个新特性flexbox，
浏览 1提问于2012-10-15得票数 2
我正在尝试用PHP动态调整jQuery JTable的大小，代码如下：$t('#TicketTableContainer').jtable('reload');
其中，pageSize是我在调整页面大小时以动态方式计算的值。).jtable('
浏览 1提问于2014-04-27得票数 1
3回答
我知道如何在窗口大小改变时使用Jquery更改类，但我需要它基于DIV的宽度，并在DIV的宽度改变时动态改变。else {
$('#partTwo').removeClass('big');});
当窗口大小改变时，这是有效的。但是，当.resize
浏览 2提问于2013-07-18得票数 0
回答已采纳
1回答
我有一个Div，它的大小可以根据用户操作(小视图和大视图)变化(只有div调整大小)，这个div包含ag网格。最初，div/网格加载的压缩大小，所以我已经使用了类，如：(小字体大小，高度，填充等)删除卷轴
但我希望当用户放大div大小时，类将与另一个类(大字体大小、高度等)交换。但是我找不到任何网格api或方法来动态地设置cellCla
浏览 2提问于2019-03-15得票数 2
回答已采纳
3回答
我使用1div元素为我的站点创建.background。它将是100%的高度。为此，我使用了jQuery维度实用程序。<div class="background"></div>$('.background').css( 'height', $(window).height() );
但现在，我想让它的高度具有动态性如果我们调整浏览器的<
浏览 1提问于2010-12-17得票数 0
回答已采纳
我需要帮助完成我的工作任务:我有一些具有以下样式的div块： width: 500px; border: 1px solid #000;const [width, setWidth] = useState(); <divclassName="main-div">
&l
浏览 3提问于2022-08-05得票数 0
6回答
我有一个包含在另一个<div>中的<div>。外部的<div>具有固定的大小，内部的应该展开以包含其内容。<div style="width: 25px; overflow: hidden"> <div style="widt
浏览 1提问于2011-12-15得票数 4
回答已采纳
2回答
我有一个包含几个内部div的div。在我的javascript/jQuery代码中，执行一个函数，该函数使用jQuery css()函数更改内部div的大小。在第一个函数之后的另一个函数中，我需要读取外部div的大小。它的大小应该随着其内容物的大小增加而增加。时，IE8和IE9仍然获得外部di
浏览 1提问于2013-06-25得票数 0
在我的一个动态网站上，我遇到了一个问题，包括以下几点：
在Internet Explorer6中，在JavaScript的帮助下更改div元素的大小后，其高度为100%的子元素不会立即刷新(即。不要拉伸到它们的新大小)，但仅当单击父div时。在我看来，文档需要一些更新。我想问一下，是否有一种命令(就像Flash中的命令)可以在发生动态更改后更新文档？简而言之，<e
浏览 0提问于2010-02-14得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
