JS-44 Element获取元素位置

1、Element获取元素位置

属性	描述
clientHeight	获取元素高度包括padding部分，但是不包括border、margin
clientWidth	获取元素宽度包括padding部分，但是不包括border、margin
scrollHeight	元素总高度，它包括padding，但是不包括border、margin包括溢出的不可见内容
scrollWidth	元素总宽度，它包括padding，但是不包括border、margin包括溢出的不可见内容
scrollLeft	元素的水平滚动条向右滚动的像素数量
scrollTop	元素的垂直滚动条向下滚动像素数量
offsetHeight	元素的CSS垂直高度（单位像素），包括元素本身的高度、padding和border
offsetWidth	元素的CSS水平宽度（单位像素），包括元素本身的高度、padding和border
offsetLeft	到定位父级左边界的间距
offsetTop	到定位父级上边界的间距

 

 

 

 

 

 

 

 

 

 

 

2、Element.clientHeight,Element.clientWidth

　　Element.clientHeight属性返回一个整数值，表示元素节点的CSS高度（单位像素），只对块级元素生效，对于行内元素返回0。如果块级元素没有设置CSS高度，则返回实际高度

　　除了元素本身的高度，它还包括padding部分，但是不包括border、margin。如果有水平滚动条，还要减去水平滚动条的高度。注意，这个值始终是整数，如果是小数会被四舍五入。

　　Element.clientWidth属性返回元素节点的CSS宽度，同样支队块级元素有效，也是只包括元素本身的宽度和padding，如果有垂直滚动条，还要减去垂直滚动条的宽度。

　　document.documentElement的clientHeight属性，返回当前视口的高度（即浏览器串口的高度）。document.body的高度则是网页的实际高度。

　　//视口高度

　　document.documentElement.clienHeight

　　//网页总高度

　　document.body.clientHeight

3、Element.scrollHeight,Element.scrollWidth

　　Element.scrollHeight,Element.scrollWidth属性返回一个整数值（小数会四舍五入），表示当前元素的总高度（单位像素），它包括padding,但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话）

　　Element.scrollWidth属性表示当前元素的总宽度（单位像素），其他地方都与scrollHeight属性类似。这两个属性只读整张网页的总高度可以从document.documentElement或document.body上读取

　　//返回网页的总高度

　　document.documentElement.scrollHeight

　　document.body.scrollHeight

4、Element.scrollLeft,Element.scrollTop

　　Element.scrollLeft属性表示当前元素的水平滚动条向右侧滚动的像素数量，Element.scrollTop属性表示当前元素的垂直滚动向下滚动的像素数量。对于那些没有滚动条的网页元素，这两个属性总是等于0

　　如果要查看整张网页的水平的和垂直的滚动条距离，要从document.documentElement元素上读取

　　document.documentElement.scrollLeft

　　document.documentElement.scrollTop

5、Element.offsetHeight,Element.offsetWidth

　　Element.offsetHeight属性返回一个整数，表示元素的CSS垂直高度（单位像素），包括元素本身的高度、padding和border,以及水平滚动条的高度（如果存在滚动条）。

　　Element.offsetWidth属性表示元素的CSS水平宽度（单位像素），其他都与Element.offsetHeight一致。

　　这两个属性都是制度属性，只比Element.clientHeigh和Element.clientWidth多了边框的高度或宽度。如果元素的CSS设为不可见（比如display:none;）,则返回0