Question

我正在使用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

根据您的<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

Answer 2

在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 }

宽度和高度与元素完全匹配，如您在屏幕截图的左下方所示：

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

2 个答案: