元素视图属性

为了方便我们班的学生来看，所以我想着不如直接发在网上，以后还可以继续看，可以进行二次完善，有不足的地方，希望大家可以一起来改正。
我将从以下的几个点来进行讲解：
1.clientWidth和clientHeight
2.clientLeft和clientTop
3.offsetWidth和offsetHeight
4.offsetTop和offsetLeft
5.scrollWidth和scrollHeight
6.scrollTop和scrollLeft

1.clientWidth和clientHeight
表示内容区域的高度和宽度，包括padding大小，但是不包括边框和滚动条。
2.clientLeft和clientTop
表示内容区域的左上角相对于整个元素左上角的位置（包括边框）
获取对象的border宽度
3.offsetWidth和offsetHeight
当前对象的宽度,当前对象的高度
offsetWidth=(border-width)*2+padding-left+width+padding-right
offsetHeight=(border-width)*2+padding-top+height+padding-bottom
offsetWidth和style.width的区别和联系：
style.width也是当前对象的宽度(width+padding+border)。
区别：1)style.width返回值除了数字外还带有单位px；
2)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小，style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值；
3)如果没有给 HTML 元素指定过 width样式，则 style.width 返回的是空字符串；
4.offsetTop和offsetLeft
offsetLeft :当前对象到其上级层左边的距离。不能对其进行赋值，设置对象到其上级层左边的距离请用style.left属性。style.left当前对象到其上级层左边的距离。
区别：1)style.left返回值除了数字外还带有单位px；
2)如对象到其上级层左边的距离设定值为百分比， style.left返回此百分比,而offsetLeft则返回到其上级层左边的距离的值；
3)如果没有给 HTML 元素指定过 left样式，则 style.left返回的是空字符串；
其中涉及到了一个概念就是offsetParent：
1.offsetParent元素只可能是下面这几种情况：
body
position不是static的元素

,

或	，但必须要position: static。 2.对于非body的父元素，但是要给父元素设置定位。 3.简单来说:就是子盒子到定位的父盒子边框到边框的距离

5.scrollWidth和scrollHeight
scrollWidth:获取对象的滚动宽度 。
scrollHeight: 获取对象的滚动高度。
6.scrollTop和scrollLeft
这两个属性的适用范围：
这两个属性只能用于元素设置了overflow的css样式中。否者这两个属性没有任何意义。且overflow的值不能为visible，但可以为hidden,auto,scroll的之中，但是hidden最常见。
注意：在对这两个参数设置值时，直接用数字就可以了，否者不起作用。
javascript中元素的scrollLeft和scrollTop属性的参数意义：
scrollLeft：是该元素的显示（可见）的内容与该元素实际的内容的距离。
即设置scrollleft就如同你拖动水平滚动条一样。假如你的页面太大，浏览器的宽度不够，就会出现滚动条。一开始scrollLeft的值为0，你就看到了你的页面最左边的内容。而不显示超过浏览器的那部分，当你向右拖动滚动条时，scrollLeft的值在增大，你就看到了右边因隐藏的东西，而看不到左边隐藏的部分。他就会从scrollLeft的位置开始显示，而不显示0-scrollLeft的元素内容。即：该元素的显示位置与实际内容的位置的距离变大.
总结一句话，就是你真实数据藏起来多少，scrollleft就是多少，scrollTop是一样的