window.innerWidth

小灰灰 2020-06-02 15:07 826阅读 0赞

# window.innerWidth

此属性可以返回浏览器视口（viewport）的宽度，只读属性。

如果存在垂直滚动条，那么包括滚动条所占据的宽度。

返回值是一个数字，单位是像素（px）。

语法结构：

```javascript
window.innerWidth
```

**浏览器支持:**

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

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

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

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

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

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

**代码实例:**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
body{
  height:3000px;
  text-align:center;
}
#text{
  width:1000px;
  height:100px;
  background-color:#60C;
  margin:0px auto;
  margin-top:200px;
  text-align:center;
  line-height:100px;
}
</style>
<script> 
window.onload=function(){ 
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.innerHTML = window.innerWidth;
  }
} 
</script> 
</head> 
<body> 
<div id="ant"></div> 
<input type="button" value="点击获取值" id="bt" />
</body> 
</html>
```

点击按钮之后可以获取浏览器窗口的文档显示区的宽度，包括滚动条的宽度。

代码运行效果截图如下：

![](/images/1591110433745.png)

特别说明如下两点：

（1）.当内容高度很大，出现垂直滚动条，滚动条的宽度也包括在内。

（2）.大家可以试着调整窗口的尺寸，来测试此属性的效果。