版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ij_fantasy/article/details/82222024
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offsetWidth、clientWidth、width、scrollWidth区别及获取</title>
<style>
.box {
width: 100px;
height: 100px;
padding:0 10px;
border: 1px solid black;
background: red;
margin: 10px;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
var oDiv = document.getElementById('box');
var a = oDiv.offsetWidth; //元素宽度 = width + padding + border 只读
var b = $(oDiv).outerWidth(false); //参数为true的话就包括margin
var c = oDiv.offsetHeight; //元素高度 = height + padding + border 只读
var d = $(oDiv).outerHeight(false); //参数为true,包括margin
var e = oDiv.clientWidth; //元素宽度 = width + padding 只读
var f = $(oDiv).innerWidth();
var g = oDiv.clientHeight; //元素高度 = height + padding 只读
var h = $(oDiv).innerHeight();
var i = oDiv.style.width; //元素宽度 width 返回的是数字，如10 可读写
var j = $(oDiv).width(); //width(val)设置宽度
var k = oDiv.style.height; //元素高度 height 需要在html中先赋值才能取到 返回的是字符串 如"10px" 可读写
var l = $(oDiv).height(); //height(val) 设置高度
var m = oDiv.scrollWidth; //元素宽度 = width + padding + 溢出尺寸，没有溢出的时候 = clientWidth 可读写
var n = oDiv.scrollHeight; //元素高度 = height + padding + 溢出尺寸，没有溢出的时候 = clientHeight 可读写
</script>
</body>
</html>