如何计算 HTML 元素内容的可见高度和宽度？
ypo*_*kas 5 html javascript css puppeteer
我正在使用 puppeteer 在我构建的应用程序中截取内容的屏幕截图。我的大部分代码都可以正常工作，但在一些情况下结果不符合预期。
我可以成功地指示 puppeteer 抓取具有定义的 css 的元素的屏幕抓取height并在该元素上width使用getBoundingClientRect()，但在没有定义高度/宽度的情况下。
我想知道在技术上是否可以根据内部元素的和来获取元素的height和。widthheightwidth
例如（或者我最可能遇到的情况）我可能有一段内容，其中正文没有设置样式参数，但内部内容将设置高度。它可能不是第一个子元素，但它甚至可能是子元素的子元素。
我已经探索过使用 getgetBoundingClientRect()但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>在 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 }
宽度和高度与元素完全匹配，如屏幕截图的左下角所示：
<body>在您的元素未修改的基础上，这应该可以正常工作并且应该等于您身体的高度和宽度。
var width = document.getElementById('container').offsetWidth;
var height = document.getElementById('container').offsetHeight;