三大家族（offset，client，scroll）

2023-12-11 12:55:51

偏移量offset

offset是偏移、位移、补偿的意思，offset家族由offsetWidth、offsetHeight、offsetLeft、offsetTop、offsetParent等组成，使用这些属性可以获取元素的实际宽高和元素到父元素的距离

offsetLeft、offsetTop：元素外边距到父元素的边框内侧，其实就是元素的margin + 父元素的padding，不包含边框。如果没有定位父元素，则获取到body元素的距离

offsetWidth ： width + border + padding
offsetHeight ： height + border + padding
offsetLeft ： margin-left + 定位父元素的padding-left
offsetTop ： margin-top + 定位父元素的padding-top
offsetParent ：是一个只读属性，用于获取最近一个定位父元素

客户区client

clientLeft ： clientLeft = border
clientTop ： clientTop = border
clientWidth ： width + padding（如果有滚动条，也不包含滚动条）
clientHeight ： height + padding（如果有滚动条，也不包含滚动条）

滚动scroll

scrollLeft、scrollTop ：获取滚动出元素可视区域的距离。
scrollWidth ： width + padding (如果内容超过元素范围，则获取到内容的高和宽)
scrollHeight ： height + padding (如果内容超过元素范围，则获取到内容的高和宽)

窗口信息

谷歌浏览器需要将document.body改为document.documentElement

document.body.clientWidth ：网页可见区域宽
document.body.clientHeight ：网页可见区域高
document.body.offsetWidth ：网页可见区域宽（包括边线的宽）
document.body.offsetHeight ：网页可见区域高（包括边线的高）
document.body.scrollTop ：网页被卷去的高
document.body.scrollLeft ：网页被卷去的左
document.body.scrollWidth ：网页正文全文宽
document.body.scrollHeight ：网页正文全文高

IE兼容示例

页面滚出去的距离

function getScroll(){
    var scrolLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    return{
        scrolLeft:scrolLeft,
        scrollTop:scrollTop
    }
}

鼠标距离文档顶部的距离

//鼠标距离文档顶部的距离 = clientY + 页面被滚动处理的长度
function getPage(e) {
    var pageX = e.pageX || e.clientX + getScroll().scrolLeft;
    var pageY = e.pageY || e.clientY + getScroll().scrollTop;
    return{
        pageX:pageX,
        pageY:pageY
    }
}

常用获取位置Js方法

绝对位置

网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。
首先，每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标。

但这里要注意一个问题：要考虑offsetParent的border的宽度。

我们需要不断的累加offsetLeft，而且要考虑border存在的情况。另外要注意offsetParent并不一定是父元素，offsetParent指的是有定位属性的的父元素
```
// 获取元素在页面上的绝对位置
function getElementPageLeft(element){
	var actualLeft=element.offsetLeft;
	var parent=element.offsetParent;
    while(parent!=null){
		actualLeft+=parent.offsetLeft+parent.clientLeft;
		parent=parent.offsetParent;
	}
	return actualLeft;
}
	
function getElementPageTop(element){
	var actualTop=element.offsetTop;
	var parent=element.offsetParent;
	while(parent!=null){
		actualTop+=parent.offsetTop+parent.clientTop;
		parent=parent.offsetParent;
	}
	return actualTop;
}
```

相对位置

网页元素的相对位置，指该元素左上角相对于浏览器窗口左上角的坐标。
有了绝对位置以后，获得相对位置就很容易了，只要将绝对坐标减去页面的滚动条滚动的距离就可以了。

//获取元素在页面上的相对于窗口的位置
function getElementViewLeft(element){
	var actualLeft = getElementPageLeft(element);
	//获取页面滚动距离
	var scrollLeft=document.body.scrollLeft||document.documentElement.scrollLeft
	return actualLeft-scrollLeft;
}

function getElementViewTop(element){
	var actualTop = getElementPageTop(element);
	var scrollTop=document.body.scrollTop||document.documentElement.scrollTop
	return actualTop-scrollTop;
}

getBoundingClientRect

获取元素的相对位置，JS还提供了一种更简单的方法：Element.getBoundingClientRect()

Element.getBoundingClientRect()返回一个对象，对象包含了元素距离窗口的位置属性：left、right、top、bottom,还包含width、height属性

主要是right和bottom要解释一下，right是指右边到页面最左边的距离，bottom是指底边到页面顶边的距离。

浏览器兼容性

ie5以上都能支持，但是又一点点地方需要修正一下，

IE67的left、top会少2px,并且没有width、height属性。

码农公寓