What's the difference between width, naturalWidth, and clientWidth?

Question

What is the difference between width, naturalWidth, and clientWidth?

This has nothing to do with JavaScript. It's a question about DOM properties. — T.J. Crowder, Jan 27 '15 at 09:36

score 9 · Accepted Answer · edited May 23 '17 at 12:01

9

Read this:

Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

example: <img> tag

naturalWidth: it is the original width of the image used in tag.

width: it is the value/default value of width attribute of tag.

edited May 23 '17 at 12:01

Community

1
1

answered Jan 27 '15 at 09:44

Vijay

2,945
1
13
23

is there any way to get original width of image before loading the image? – galeb Jan 27 '15 at 09:46
use Load event of image and get the width & height or you can use: **var w = document.querySelector('img').naturalWidth;** – Vijay Jan 27 '15 at 09:53
You didnt explain clientWidth – Mick Mar 20 '19 at 12:29

score 2 · Answer 2 · answered Jul 14 '16 at 17:24

clientWidth represents the width of the element and is subject to manipulation by the browser. For example, a 300px wide image can be resized and this manipulated value will come through in clientWidth.

naturalWidth is the natural width of the element. In the example of a 300px wide image, the naturalWidth will still be 300 even if the image is resized in the browser via CSS or JavaScript.

What's the difference between width, naturalWidth, and clientWidth?

2 Answers2

Linked