JS中获取元素的尺寸及位置

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都是数值型