1. 基本概念
height/width
height:指元素内容的高度 ,jQuery中的height()方法返回的就是这个高度。
offsetWidth/offsetHeight
对象的可见宽度,包含滚动条和border。非标准属性,但各浏览器都支持
offsetHeight:内容高度+padding高度+边框宽度 ,jQuery中的outerHeight()方法返回的就是这个高度。
clientWidth/clientHeight
对象的可见宽度,不包含滚动条和border。
clientHeight:内容高度+padding高度 ,jQuery中的innerHeight()方法返回的就是这个高度。
scrollWidth/scrollHeight(慎用)
元素完整的高度和宽度,overflow:hidden的部分也计算在内。
offsetLeft/offsetTop
当前元素距浏览器边界的偏移量,以像素为单位。
clientTop/clientLeft
这个属性测试下来的结果是=border。
scrollLeft/scrollTop(IE6计算方式不同)
设置或返回已经滚动到元素的左边界或上边界的像素数。
2. 比较offsetHeight/clientHeight/scrollHeight
共同点:3个值都和元素的margin无关。
差 异:offsetHeight = height+padding+border
clientHeight = height+padding-滚动条的宽度(如果有滚动条)
scrollHeight 获得的是元素的实际宽度影藏的部分也计算在内
备 注:1.Jquery中的css("height")/height()不计算padding/border/滚动条。
2.offsetWidth、clientWidth、scrollWidth同理。
Jquery也提供了三种相关的宽度和高度。
Height", "Width"是元素的content的宽度和高度。
innerHeigh, innerWidth是 在元素的内容之上加上padding。其实就是clientHeight,clientWidth。
outerHeigh、outerWidth是在元素的内容上加上padding、border、margin。
3. 比较offsetTop/clientTop/scrollTop
offsetTop:元素相对body的Top值(元素border以外到body.padding以内)
clientTop = offsetTop-(height+padding)=border
scrollTop:元素的滚动值 (可用来做滚动效果)