javascript - img.height 与 img.style.height 有什么区别？

Question

我正在尝试通过遍历数组并调整它们的大小来调整一堆图像的大小

if(items[0].height > 700 || items[0].width > 700){
  items[0].style.height = "700px";
   items[0].style.width = "700px";
}

当我使用画布尝试裁剪图像时，我注意到我给它裁剪的坐标并没有削减我的预期。

我将假设 img.style.height 仅更改显示属性，而 img.height 更改 img 的实际尺寸？还是他们做同样的事情？

score 3 · Accepted Answer

img.height指元素上的height属性，img.style.height指定义为样式的高度（如在css中）

为了

img.height将是 20。

为了

<img id="example" style="height:20">

img.style.height将是 20。如果您通常设置样式，则最好更喜欢使用样式并将您对将高度硬编码为属性的担忧分开。所以在这种情况下可能会在图像上设置一个类并将高度放在 CSS 中。

如果您正在阅读样式，img.height无论其设置如何，都会返回实际高度，因此更安全。

score 1 · Accepted Answer

我发现的主要区别（除了@ben336 描述的属性的性质）在于它们可以表示的内容。

img.height将始终以像素为单位表示高度。这仅在 HTML5 中是正确的，这就是我根据标签猜测您正在使用的内容。早期版本的 HTML 允许通过 img.height 指定百分比和像素，这让我的观点没有实际意义。
```
img.height = 20; // Always means 20 pixels.
```
另一方面， img.style.height将表示高度，以像素为单位或以原始大小的百分比表示。
```
img.style.height = 20px; // 20 pixels in height;
```
或者
```
img.style.height = 20%; // 20% of original height.
```

2 回答 2