如何计算 HTML 元素内容的可见高度和宽度？

Question

我正在使用 puppeteer 在我构建的应用程序中截取内容的屏幕截图。 我的大部分代码都在工作，但我有几个场景结果不符合预期。 我可以成功地指示 puppeteer 使用元素上的 getBoundingClientRect() 对具有定义的 css 高度和宽度的元素进行屏幕抓取，但在没有定义高度/宽度的情况下，我想知道在技术上是否有可能获得元素的高度和宽度基于内部元素的高度和宽度。

例如（或者我将遇到的最可能的情况）我可能有一段内容，其中正文没有设置样式参数，但内部内容将设置高度。 它可能不是第一个子元素，但它甚至可能是子元素的子元素。

我已经使用 get getBoundingClientRect() 和 offsetHeight 进行了探索，但没有成功。

有没有一种方法可以让我获得元素的计算高度/宽度？

 var body = document.querySelector('body'); console.log(body.clientHeight); console.log(body.style.height); console.log(body.getClientRects()); console.log(body.getBoundingClientRect());

 #container { height:200px; width:200px; background-color:blue; border:1px solid black; color: white; text-align: center; }

 <body> <div id="container"> HELLO </div> </body>

Answer 1

在 Puppeteer 中，这可以通过boundingBox()来完成。 使用页面或元素选择器获取元素，然后调用elem.boundingBox()获取元素的x、y、宽度和高度。 请参阅以下代码：

const elem = await page.$('.portal-body');
const boundingBox = await elem.boundingBox();
console.log('boundingBox', boundingBox)

对于我的示例，控制台记录了以下内容：

2020-12-02 12:58 -08:00: boundingBox { x: 0, y: 0, width: 984, height: 1072 }

该宽度和高度与元素完全匹配，如屏幕截图左下角所示：

Answer 2

基于你的<body>元素没有被修改，这应该可以正常工作并且应该等于你的身体的高度和宽度。

var width = document.getElementById('container').offsetWidth;
var height = document.getElementById('container').offsetHeight;

文档： https : //developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

如何计算 HTML 元素内容的可见高度和宽度？

问题描述

2 个解决方案

解决方案1
2 2020-12-02 21:14:48

解决方案2
1 2019-12-06 15:16:50

如何计算 HTML 元素内容的可见高度和宽度？

问题描述

2 个解决方案

解决方案1 2 2020-12-02 21:14:48

解决方案2 1 2019-12-06 15:16:50

解决方案1
2 2020-12-02 21:14:48

解决方案2
1 2019-12-06 15:16:50