javascript - 使用 jquery 以厘米为单位获取 div 的高度？

Question

我有一个 div ，我在其中动态添加数据，我想以厘米为单位获取特定 div 的高度。因为我需要根据高度来控制该 div 中可以显示的数据量。

Answer 1

1px = 0.02645833 cm;

或者

1 cm = 37.795276px;

请参阅以下链接：

如何通过 javascript 访问屏幕显示的 DPI 设置？

如何使用 JavaScript 检测屏幕 DPI

像素到厘米？

Answer 2

这是一个将 CSS 像素转换为厘米的小 javascript 函数：

function px2cm(px) {
  var d = $("<div/>").css({ position: 'absolute', top : '-1000cm', left : '-1000cm', height : '1000cm', width : '1000cm' }).appendTo('body');
  var px_per_cm = d.height() / 1000;
  d.remove();
  return px / px_per_cm;
}

它在页面中插入一个 1000cm x 1000cm 的空白<div>，然后以 CSS 像素为单位读取其高度。通过不使用魔法值（如上面建议的 1px = 0.02645833 cm，仅当您的屏幕 DPI 为 96 时才有效），它确保考虑当前屏幕 DPI。

由于屏幕的 DPI 永远不会改变，因此您应该缓存px_per_cm以避免在任何时候调用此函数时对性能造成任何影响

Answer 3

首先，您需要确定您正在查看多少 DPI（每英寸点数）。在屏幕上，这通常在 72 到 100 之间。让我们以 72 为例。

每英寸 72 个点（像素）。
即每 2.54 厘米有 72 个像素
所以 1 厘米是 28.35 像素

现在只需以像素为单位获取高度，然后进行转换。