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

59 阅读 0 评论 39 点赞

我是靠谱客的博主怡然斑马，最近开发中收集的这篇文章主要介绍试谈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，因为这个属性可以直接获取到对象的真实宽度或高度。