试谈style.width和offsetWidth对设置对象宽度区别

昨天被人叫过去看一个bug。他的bug有一处是这样的：

img.style.width = div.style.width / 2;
img.style.height = div.style.width / 2;

在跟他说明宽度不能用这种方式来设置要用offsetWidth或者offsetHeight 设置之后他问了我一句

为啥同样都是宽度，为啥不能用这种宽度设置要用那种方式设置呢

是啊，我一直都知道要这么用，但是为啥要这么用呢。后来我先是找了一下这两者的区别，首先是offsetWidth/Height，引用自MDN

HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。

接着是style.width，引用自MDN

HTMLElement.style 属性返回一个 CSSStyleDeclaration 对象，表示元素的 内联style 属性（attribute），但忽略任何样式表应用的属性。 通过 style 可以访问的 CSS 属性列表，可以查看 CSS Properties Reference。

看上去都没什么区别吧。但是在MDN这个页面下面有这么一句话：

通常，要了解元素样式的信息，仅仅使用 style 属性是不够的，这是因为它只包含了在元素内嵌 style 属性（attribute）上声明的的 CSS 属性，而不包括来自其他地方声明的样式，如 部分的内嵌样式表，或外部样式表。要获取一个元素的所有 CSS 属性，你应该使用 window.getComputedStyle()。

所以上面的两行代码实际是没有什么作用的，因为style.width 获取和设置的是元素的内联样式。而他当初的HTML中并没有内联的样式，所以他的本意通过一个对象style属性中的宽度/高度属性给另外一个对象设置宽高是不能实现的，因为此时style.width 为空白。

而要想获取此时对象的实际宽高度，就必须用offsetWidth / offsetHeight，因为这个属性可以直接获取到对象的真实宽度或高度。