当我们把元素写在网页的时候，我们想在js中来调用它了解他的尺寸是多少，那我们应该通过什么方法来获取它呢？
下面我就通过一个例子介绍一些属性来让我们获取元素在页面上的尺寸吧。
我们首先通过html和css布局一个盒子在页面上
css部分
<style>
#box{width: 100px;height: 100px;padding: 10px;border: 20px solid black;margin: 30px;position: absolute;left: 40px;top: 40px;overflow: auto}
</style>
html部分
<body>
<div id="box">获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值获取元素的top值</div>
</body>
这就是我们写在页面上的元素，下面我们通过不同的属性来获取它不同部分的尺寸
注意：以下属性只可获取尺寸不可设置
1.视口大小：视觉窗口，不包括边框（clientWidth和clientHeight）
console.log(obox.clientWidth); // cont+padding
console.log(obox.clientHeight); // cont+padding
这里我们通过clientWidth和clientHeight来获取元素内容加上内边距的尺寸。很明显我们一开始设置的宽度和高度各为100px，padding给了一个10px，所以我们理应的到的是120和120。但是因为我们通过overflow：auto的属性把超过框的内容通过滑动条来显示，所以滑动条占据了我们盒子内容部分，所以我们得到的是
所以我们暂且先把注释掉overflow：auto，此时就得到了我们本来设置的120和120；
2.视觉大小：看得见的大小（offsetWidth和offsetHeight）
console.log(obox.offsetWidth); // cont+padding+border
console.log(obox.offsetHeight); // cont+padding+border
我们offsetWidth和offsetHeight是获取的内容加内边距再加边框的尺寸
也就是100px内容加上两个10px的内边距再加上两个20px的边框
就是160px
3.当前元素的偏移量：父级有定位，根据父级的偏移量，父级没有定位，根据页面（offsetLeft和offsetTop）
console.log(obox.offsetLeft); // margin+position
console.log(obox.offsetTop); // margin+position
offsetLeft和offsetTop获取的是当前元素的偏移量也就是margin加上position的值也就是30px+40px=70px
4.包含可滚动的距离（scrollWidth和scrollHeight）
console.log(obox.scrollWidth); //包含溢出的文本的尺寸
console.log(obox.scrollHeight); //包含溢出的文本的尺寸
这个主要是获取内容的尺寸（包括padding和content），但是因为我们在盒子中输入了很多内容，通过滚动条来隐藏起来了，但是这个属性是包含溢出文本的尺寸的，所以我们得到的是
这个98代表的宽度是减去了滚动条的那个宽度所以120变成了98；
而912是原本溢出的内容总高度；
最后再给大家介绍一种不仅可以获取还可以设置的属性
5.滚动的距离，既能获取，又能设置（scrollTop和scrollLeft）
// 滚动的距离，既能获取，又能设置
obox.onscroll = function(){
console.log(obox.scrollTop);
console.log(obox.scrollLeft);
}
obox.onclick = function(){
obox.scrollTop = 333;
}
这里我们通过滚动事件来获取滚动距离顶部和左边的距离得到的是
因为宽度没有滚动条所以显示为0，但是距离顶部的高度随着我滑轮的滚动在不断地增加。下面我们来看看我们设置的点击盒子设置回到距离顶部333px的地方。
当我们点击盒子后，滑轮一下跳到了距离顶部333的距离来显示内容，
这样就实现了我们设置尺寸的功能。
