使用此代码获取图像的宽度是否正确？ [复制]答案

【问题标题】：Is it right to get the width of an image using this code? [duplicate]使用此代码获取图像的宽度是否正确？ [复制]
【发布时间】：2022-01-14 07:43:07
【问题描述】：

document.getElementById("width").innerHTML = 'Width: ' + img.width;

只是写了这个，我得到了我想要的结果。但是reading this我看到object.style.width是用来返回图片宽度的。

问题：

我的代码对吗？或者我应该把.style 放在object 之后？

有人可以解释为什么在object 之后不使用.style 就可以工作吗？

为什么我应该使用object.style.width 而不仅仅是object.width？

【问题讨论】：

是的，你必须使用img.style.width查询css
@NVRM css（或更准确地说是内联样式）是的，但问题是关于图像的宽度。
不管怎样，用这个，看例子developer.mozilla.org/en-US/docs/Web/API/Window/…
@HereticMonkey 提到的问题的答案是关于纯 JavaScript 和 jQuery。你不需要为此使用 jQuery（现在你几乎不需要 jQuery）。然而，HereticMonkey 认为它是复制品是正确的。但我之所以回答它，是因为您专门询问了与糟糕的 w3school 文章相关的困惑。
顺便说一句，你在 jQuery 之前学习纯 JavaScript 绝对是正确的:)。

标签： javascript

【解决方案1】：

在链接的 w3schools 网站上，您有以下声明：

样式宽度属性
document.getElementById("myBtn").style.width = "300px";
定义和用法
width 属性设置或返回元素的宽度。

但是，sets or returns the width an element 部分非常不准确且具有误导性，这也是 w3schools 被视为不良学习资源的原因之一。

如果完全错误，则在页面末尾的这部分：

返回<img>元素的宽度：
alert(document.getElementById("myImg").style.width);

obj.style.width 返回通过内联样式应用于元素的宽度属性。但这可能什么都不是，像素值或相对值。

假设img 是HTMLImageElement，那么img.width 将为您提供元素的计算宽度，因此它可能与链接的图像资源不同。

naturalWidth 给出图像的实际尺寸。

// wait for the image to be loaded otherwise to could be 0 if no width is enforce through styling
let img = document.querySelector('#img')

document.querySelector('#img').onload = () => {
  console.log('width using .width: ' + img.width) // width using .width: 350
  console.log('width using .naturalWidth: ' + img.naturalWidth)  // width using .width: 350
  console.log('width using .style.width: ' + img.style.width)  // width using .width: 
}

&lt;img id="img" src="https://via.placeholder.com/350x150"&gt;

.style.width 的另一个示例可能无法返回您想要的。

let img1 = document.querySelector('#img1')
let img2 = document.querySelector('#img2')

img1.onload = () => {
  console.log('img1 width using .width: ' + img1.width) // img1 width using .width: 200
  console.log('img1 width using .naturalWidth: ' + img1.naturalWidth) // img1 width using .naturalWidth: 350
  console.log('img1 width using .style.width: ' + img1.style.width) // img1 width using .style.width: 
}


img2.onload = () => {
  console.log('img2 width using .width: ' +img2.width) // img2 width using .width: 200
  console.log('img2 width using .naturalWidth: ' + img2.naturalWidth) // img2 width using .naturalWidth: 350
  console.log('img2 width using .style.width: ' + img2.style.width) // img2 width using .style.width: 50%
}

#img1 {
   width: 50%;
}

.container {
   width: 400px;
}

<div class="container">
<img id="img1" src="https://via.placeholder.com/350x150">
<img id="img2" src="https://via.placeholder.com/350x150" style="width: 50%">
</div>

【讨论】：

我实例化了一个图像以用作画布的背景：var img = new Image(); img.src = "images/cat;png"; 在这种情况下，如果我使用naturalWidth 可能会更好，因为正如 Ran Turner 所说，通过这个我会得到图像文件的尺寸吗？
我无法运行您在此处给出的示例，但在console.log('img1 width using .width: ' + img1.width) 中，我的返回字面意思是“50% 或（或宽度尺寸减少 50% 后的图像宽度（以像素为单位）） ? 发生这种情况是因为.width 采用css 样式（或内联样式）...
@Corvo 将输出添加为注释。并在第二个示例中的图像周围添加了一个容器以具有一致的值。（50% 是相对于图像所在的位置）。
谢谢！现在我懂了。最后一个问题：console.log('img1 width using .width: ' + img1.width)返回200是因为宽度缩小50%后是200px吧？
@Corvo 容器的宽度为400px，400px 的50% 为200。

【解决方案2】：

naturalWidth 和 naturalHeight 将为您提供自然尺寸，即图像文件的尺寸。

offsetWidth 和 el.offsetHeight 将为您提供元素在文档上呈现的尺寸。

const el = document.getElementById("width");

const naturalWidth = el.naturalWidth; // Only on HTMLImageElement
const naturalHeight = el.naturalHeight; // Only on HTMLImageElement
const offsetWidth = el.offsetWidth;
const offsetHeight = el.offsetHeight;

【讨论】：