width、naturalWidth 和 clientWidth 有啥区别？

Posted 2023-03-05

【中文标题】width、naturalWidth 和 clientWidth 有啥区别？

【英文标题】：What's the difference between width, naturalWidth, and clientWidth?width、naturalWidth 和 clientWidth 有什么区别？

【发布时间】：2015-03-25 20:53:27

【问题描述】：

width、naturalWidth 和 clientWidth 有什么区别？

【问题讨论】：

这与 javascript 无关。这是一个关于 DOM 属性的问题。

【参考方案1】：

clientWidth 表示元素的宽度，受浏览器的操纵。例如，一个 300px 宽的图像可以调整大小，这个操纵的值将通过 clientWidth 传递。

naturalWidth 是元素的自然宽度。在 300 像素宽的图片示例中，naturalWidth 仍然是 300，即使通过 CSS 或 JavaScript 在浏览器中调整图片大小。

【参考方案2】：

阅读：

Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

示例：<img> 标签

naturalWidth：标签中使用的图片的原始宽度。

width：标签宽度属性的值/默认值。

【讨论】：

有没有办法在加载图片之前获取图片的原始宽度？

使用图像的加载事件并获取宽度和高度，或者您可以使用：var w = document.querySelector('img').naturalWidth;

你没有解释clientWidth