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的实际尺寸？或者他们做同样的事情？

Answer 1

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

的

img.height将为20。

代表

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

img.style.height将是20.如果您通常更喜欢使用样式并将您的关注点分解为将属性作为属性进行硬编码。所以在这种情况下，可能在图像上设置一个类并将高度放在CSS中。

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

Answer 2

我发现的主要区别（除了@ 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.