一、offset、client、scroll尺寸问题
1、offset
element.offsetLeft:是element到带有定位的父元素左边的距离(如果父元素没有定位就以body为标准)
element.offsetTop:是element到带有定位的父元素上边的距离(如果父元素没有定位就以body为标准)
element.offsetWidth:是element宽度(包含padding、border,不包含margin)
element.offsetHeight:是element高度(包含padding、border,不包含margin)
2、client
element.clientLeft:是element左边框的宽度
element.clientTop:是element上边框的宽度
element.clientWidth:是element宽度(包含padding,不包含margin、border)
element.clientHeight:是element高度(包含padding,不包含margin、border)
3、scroll
element.scrollLeft:element内容超过元素大小的左边距离
element.scrollTop:element内容超过元素大小的上边距离
element.scrollWidth:是element可视宽度(包含padding,不包含margin、border)
element.scrollHeight:是element可视高度(包含padding,不包含margin、border)
例如:
二、jQuery的尺寸问题和位置
1、width()和height()
获取元素的宽高,只有width和height
2、innerWidth()和innerHeight()
获取元素的宽高,包含padding
3、outerWidth()和outerHeight()
获取元素的宽高,包含padding、border
4、outerWidth(true)和outerHeight(false)
获取元素的宽高,包含padding、border、margin
5、offset()
返回的是一个带有top和left的对象,不过top和left是相对与文档的值,与他的父元素没有关系,可读写
6、position()
返回的是一个带有top和left的对象,top和left是相对与父元素的值,只读
7、scrollTop()/scrollLeft()
是滚动的时候被卷去的top和left值,可读写