在JavaScript

Question

我试图用它的子像素值来获取元素的高度。

举个例子：

＆＃13;

＆＃13;

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) + ';';

＆＃13;

body {
  margin: 0;
}

img {
  float: left;
}

#small {
  width: 3px;
}

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

＆＃13;

<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">

＆＃13;

＆＃13;

＆＃13;

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

我实际上落后的是比例。正如你所看到的那样，差异最终变得很大：

• 小图像比：0.6（3/5）
• 大图像比：0.6625（212/320）

大图像比率是真实的，因为图像没有调整大小。有没有办法获得高度的实际值，或者至少比每像素单位更接近？

Answer 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">