offsetWidth、clientWidth、innerWidth宽度
offsetWidth = 水平方向的宽度+padding_left+padding_right+border
clientWidth = 水平方向的宽度+padding_left+padding_right
scrollWidth = 可视区域宽度+被隐藏区域宽度
innerWidth = 浏览器窗口可视区域宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>offsetWidth测试</title>
<style>
.div1{
width:200px;
height: 200px;
background:#666;
padding: 100px;
border: 50px solid #000000;
margin:100px;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
<script>
var div1 = document.querySelector(".div1");
console.log("offsetWidth:"+div1.offsetWidth);
console.log("clientWidth :"+div1.clientWidth);
console.log("innterWidth:"+window.innerWidth);
console.log("scrollWidth:"+div1.scrollWidth);
console.log("scrollWidth:"+window.scrollWidth);
</script>
</html>