JavaScript offsetWidth

红太狼 2020-05-27 13:01 764阅读 0赞

# JavaScript offsetWidth

offsetWidth 属性可以返回指定元素的布局宽度，只读属性。

布局宽度所涵盖的内容不仅包括 CSS width 宽度，还有其他内容。

属性的返回值是一个数字（不带任何单位，默认以像素计）。

语法结构：

```javascript
let num = dom.offsetWidth
```

红线之间的尺寸，就是 offsetWidth 属性的返回值，下面分析一下具体构成：

（1）.包含元素的宽度，这个宽度是 CSS width 属性规定的值。

（2）.包含左右内边距的尺寸。

（3）.不包含左右外边距的尺寸。

（4）.包含左侧垂直滚动条的宽度（向内占据宽度）。

上面四条总结会在后面通过代码实例进行验证。

offsetWidth 属性有几点再强调一下：

（1）.返回值是数值，不带任何单位，默认单位是像素。

（2）.与CSS width 不同，虽然可能在数值在相等。

（3）.如果元素的CSS display 属性值为none，返回值为0.

（4）.offsetWidth 返回值会对数值进行四舍五入取整，假如实际值是260.5，那么返回261。

**浏览器兼容：**

（1）.IE 浏览器支持此属性。

（2）.edge 浏览器支持此属性。

（3）.谷歌浏览器支持此属性。

（4）.opera 浏览器支持此属性。

（5）.火狐浏览器支持此属性。

（6）.safari 浏览器支持此属性。

**代码实例：**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style >
#ant{
  width :100px;
  line-height :50px;
  border :10px solid #ccc;
  padding-left :10px;
  padding-right :5px;
  text-align :center;
  font-size:12px;
  color:green;
}
</style>
<script>
window.onload = ()=> {
  let oDiv=document.getElementById("ant");
  oDiv.innerHTML=oDiv.offsetWidth;
}
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>
```

将 offsetWidth 属性值写入div中，运行效果截图如下：

![](/images/1590584461887.jpg)

对上述代码分析如下：

（1）.属性返回值是数值类型，默认以像素计。

（2）.135 = width + border-left + border-right + padding-left + padding-right。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
#box {
  width :200px;
  height :100px;
  line-height :100px;
  text-align :center;
  border:10px solid #ccc;
  padding-left:10px;
  overflow:auto;
}
#ant{
  width :30px;
  height :200px;
  background:green;
}
</style>
<script>
window.onload = ()=> {
  let odiv = document.getElementById("box");
  console.log(odiv.offsetWidth);
}
</script>
</head>
<body>
<div id="box">
  <div id="ant"></div>
</div>
</body>
</html>
```

上述代码浏览器运行效果截图如下：

![](/images/1590584447267.jpg)

offsetWidth 属性值谷歌开发者工具控制台截图如下：

![](/images/1590584434043.png)

230 = width（200）+ border-right（10） + border-left（10） + padding-left（10）。

代码分析如下：

（1）.内部 div 高度较大，父 div 元素出现滚动条。

（2）.滚动条有一定的宽度，当前在谷歌浏览器下宽度值为 17px，其他浏览器可能不同。

（3）.offsetWidth 包括滚动条的宽度，滚动条是向内占据宽度。

注意：滚动条的宽度包括在 width 宽度之内（width 超过滚动条宽度时候）。