如何在 node.js 中查找 HTML 元素的高度？答案

【问题标题】：How to find height of a HTML element in node.js?如何在 node.js 中查找 HTML 元素的高度？
【发布时间】：2013-12-06 00:00:31
【问题描述】：

这几天我被一个相当棘手的问题困住了。我在node.js 中的变量中有一个自动生成的HTML 页面作为字符串。我需要找到一些 HTML 元素的高度并进行 HTML 操作（如标签创建、删除、追加、css 属性设置等）。

显然我需要先创建一个类似于 DOM 的 HTML 页面结构，然后再继续。

虽然对于 HTML 操作，我有很多选项，例如 cheerio、node.io、jsdom 等，但这些选项都不能让我找到节点处元素的高度。

所以在浪费了很多时间之后，我决定寻找更重的解决方案，比如在节点上实现一个无头浏览器（phantomjs 等）并通过纯 JavaScript 驱动元素offsetHeight。

谁能告诉我这样可以达到我的目标吗？哪种无头浏览器最适合这项任务？

如果我走错了方向，那么任何人都可以建议我任何其他可行的解决方案吗？

此时我已经准备好尝试任何事情了。

提前谢谢！！

注意：在我的特殊情况下，在客户端使用javascript 有很多问题，因为生成的 HTML 页面的内容应该被客户端用来粘贴到他的网站中。留下一个正在运行的 javascript 来重新构建 HTML 会让他在最后变得困难。

【问题讨论】：

听起来你走上了一条死胡同；真正的问题是为什么你认为你需要在服务器上获取元素的高度？我怀疑回答这个问题会导致你找到一个不涉及这样做的解决方案。在没有显示的情况下，元素的高度没有任何意义。因此，虽然您可以为此使用无头浏览器，但您必须告诉浏览器要模拟什么大小的窗口，这使得答案特定于该窗口大小，这实际上并没有更好而不仅仅是凭空挑选自己的答案。
许多 html 在渲染时设置它们的宽度和高度，当浏览器定义它的盒子模型时。我不认为你可以在服务器上得到它
这里不说CSS和跨浏览器的区别
同意@T.J.Crowder。你可能应该在你的 HTML 字符串中引入一些 JavaScript，它会在浏览器上执行，并且可以计算出元素的实际高度。
@T.J.Crowder 确实，在没有显示的情况下，元素的高度没有任何意义，但我需要该高度来准备自动生成的 HTML 以在客户端显示。我已经有一个客户端javascript来满足我的需求，但是由于页面的资源效率低下和“不干净”（我的老板想出了这个词），我需要将它迁移到服务器端。元素的高度是我完成迁移所需的最后一件事。

标签： javascript jquery html node.js headless-browser

【解决方案1】：

Node 的服务器端 HTML 库（如cheerio 和 jsdom）是严格的 DOM API 模拟库。它们不会尝试实际呈现文档，而这是计算元素大小和位置所必需的。

如果您真的需要计算服务器上元素的大小，则需要像PhantomJS 这样的无头浏览器。它是一个带有 JavaScript API 的完整 WebKit 渲染器。它与节点完全分离，因此您要么需要使用Phantom's API 编写实用程序脚本，要么使用a npm module that lets you control Phantom from node。

在阅读了您的问题下的 cmets 之后，很明显您不应该在服务器上计算高度。客户端代码是合适的地方。

【讨论】：

僵尸呢？我听说它比 phantomjs 更轻更快，而且它是一个节点模块。
@SurenderThakran：zombie 不是真正的浏览器渲染引擎。它是一个 DOM + Browser API 模拟器——它基本上是 jsdom 加上顶部的额外 API 实现。我实际上并没有尝试过，但我非常怀疑它是否会给你准确的尺寸。