JS中获取元素的尺寸及位置
1. clientWidth
a) 作用:获取元素可视化宽度
b) 注意:clientWidth=width+padding
2. clientHeight
a) 作用:获取元素可视化高度
3. offsetWidth
a) 作用:获取元素宽度
b) 注意:offsetWidth=width+padding+border
4. offsetHeight
a) 作用:获取元素高度
5. 获取元素宽度和高度的注意事项
a) 如果要获取页面的宽度通常用clientWidth和clientHeight,如果要获取页面中某个元素的宽度和高度,可以用offsetWidth和offsetHeight
b) 如果要获取页面的宽度,需要用
页面宽度=document.documentElement.clientWidht || document.body.clientWidht
页面高度=document.documentElement.clientHeight ||document.body.clientHeight
6. offsetParent
a) 作用:获取元素位移的参照物
b) 注意:
i. 如果元素没有父元素或父元素没有定位,那么返回值就是body
ii. 如果有父元素,且父元素有定位,那么返回值就是具有定位的父元素
iii. 如果有多个祖先元素具有定位,那么返回值就是离它最近的且具有定位属性的祖先元素
7. offsetTop:子元素相对于参照物顶端距离
8. offsetLeft:子元素相对于参照物左侧距离
9. clientWidth、clientHeight、offsetWidth、offsetHeight、offsetTop、offsetLeft都是数值型