在 JavaScript 中获取高度或宽度的子像素值答案

【问题标题】：Get sub-pixel value of height or width in JavaScript在 JavaScript 中获取高度或宽度的子像素值
【发布时间】：2017-02-03 06:21:42
【问题描述】：

我正在尝试使用它的子像素值获取元素的高度。

举个例子：

var small = document.getElementById('small');
var big = document.getElementById('big');
var result1 = document.getElementById('result1');

result1.innerHTML = 'Small height: ' + small.clientHeight + '; width: ' + small.clientWidth + '; ratio: ' + (small.clientWidth / small.clientHeight) + ';';

result2.innerHTML = 'Big height: ' + big.clientHeight + '; width: ' + big.clientWidth + '; ratio: ' + (big.clientWidth / big.clientHeight) + ';';

body {
  margin: 0;
}

img {
  float: left;
}

#small {
  width: 3px;
}

div {
  float: left;
  font-size: 2rem;
}

<div id="result1"></div>
<div id="result2"></div>

<img src="https://i.imgur.com/580DosTm.jpg" id="small">
<img src="https://i.imgur.com/580DosTm.jpg" id="big">

基本上，您可以在大尺寸和非常小的尺寸中看到相同的图像。在小的宽度设置为 3px。实际高度为 4.51562px（可以在 Chrome 开发者工具中看到）。但是，JavaScript 会将数字四舍五入为 5 像素。

我实际上落后的是比例。如您所见，差异最终很大：

小图像比例：0.6 (3/5)
大图比例：0.6625 (212/320)

大图像比例是真实的，因为图像没有调整大小。有什么方法可以获得高度的真实值，或者至少比每像素单位轮更接近吗？

【问题讨论】：

标签： javascript html css height

【解决方案1】：

我能得到的最接近的值是使用 getComputedStyle 读取计算的 CSS 属性并从那里获取值：

parseFloat(getComputedStyle(small));

它在 Chrome 中给了我：

小高度：4.51562
小比：0.6643605972158861 (3/4.51562)

var small = document.getElementById('small');
var big = document.getElementById('big');
var result1 = document.getElementById('result1');
var smallStyles = getComputedStyle(small);
var smallHeight = parseFloat(smallStyles.height);
var smallWidth = parseFloat(smallStyles.width);

result1.innerHTML = 'Small height: ' + smallHeight + '; width: ' + smallWidth + '; ratio: ' + (smallWidth / smallHeight) + ';';

result2.innerHTML = 'Big height: ' + big.clientHeight + '; width: ' + big.clientWidth + '; ratio: ' + (big.clientWidth / big.clientHeight) + ';';

body {
  margin: 0;
}

img {
  float: left;
}

#small {
  width: 3px;
}

div {
  float: left;
  font-size: 2rem;
}

<div id="result1"></div>
<div id="result2"></div>

<img src="https://i.imgur.com/580DosTm.jpg" id="small">
<img src="https://i.imgur.com/580DosTm.jpg" id="big">

【讨论】：