一、写在前面

在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念。

1.pageX,clientX,screenX与offsetX

先统一了解下这四个概念,理解不透没关系,咱们把概念相近的对比着一一细说。

pageX:鼠标指针距离文档左侧边缘的距离,随滚动条变化而变化

clientX:鼠标指针距离可视窗口左侧边缘的距离,不随滚动条变化而变化

screenX:鼠标指针距离屏幕的距离(包括浏览器工具栏之类),不随滚动条变化而变化

offsetX:鼠标指针距离当前绑定元素左侧距离

我们先来看看pageX与clientX无滚动条的对比效果

<div class="one"></div>
var Div = document.querySelector('.one');
Div.onmousemove = (e) => {
var X1 = e.pageX;
var Y1 = e.pageY;
var X2 = e.clientX;
var Y2 = e.clientY;
Div.innerHTML = `pageX:${X1},pageY:${Y1},clientX:${X2},clientY:${Y2}`
}

offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解-LMLPHP

由图可见,在无滚动条的情况下,pageX与clientX,pageY与clientY是完全相同的。

试着给div增加一个margin-left:1600px;让页面出现滚动条,我们将可视窗口滚动到最右侧,再来对比pageX与clientX

offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解-LMLPHP

可以看到,在页面X轴出现滚动条后,pageX始终要比clientX要大,那是因为clientX无论滚动条滚动多少,它始终只计算鼠标到可视窗口左侧的距离,而pageX则还要加上滚动的距离

pageX = 鼠标到可视窗口左侧距离+滚动条滚动距离(如果有滚动条)

clientX = 鼠标到可视窗口左侧距离

如果没有滚动条,这两者的距离是完全相同的。

我们再结合前者,加上screenYoffsetY的对比,请看图

offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解-LMLPHP

为了方便对比,这里我们拿Y轴做对比。

offsetY是相对绑定事件的元素,这里是相对div,所以相比另外三个,Y轴的数值永远是最小的。

pageY和clientY在无滚动条的情况下是完全相同的,相对文档和可视窗口区域。这里因为没有滚动条,所以是完全相同的。

screen是相对屏幕,包含了浏览器任务栏,书签栏的高度,所以它永远是最高的。

offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解-LMLPHP

关于这四个的兼容问题,由于浏览的不断更新,比如offsetX很多博客都说是IE独有的,结果上图我全是在谷歌测试的,也是支持的,所以这样的说法过于绝对,是不完全正确的。

2.  offsetLeft与style.left

下面概念中的position值为非static时,可以理解为position为relative,absolute,fixed其一

2.1  offsetLeft:

元素相对其定位父级(offsetParent)的左偏移量。

简单去理解,就是距离元素最近且position值非static父级元素的左偏移量,如果向上一直未找到,则相对body。

假设此时一个父级div包含一个子级div,均未定位,父级margin-left为20px,子级margin-left为30px,且父级border为2px

我们上面说了,从子级开始往上找定位父级,但是未找到,那么此时就相对body

那么子级的offsetLeft = 父级左偏移量20px+子级30px+父级边框2px

offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解-LMLPHP

我们尝试给父级div添加一个position:absolute属性,其余属性全部不做改变,此时子级的定位父级就是自己的上级div,因此offsetLeft为30px

offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解-LMLPHP

2.2  style.left:

获取元素相对其定位父级的左偏移,且元素本身position值为非static。

简单去理解,style.left只有元素自身进行定位才会有效,否则是无法取到的。

2.3  为什么style.left取不到?

首先元素本身要进行定位,其次,其left属性为内部样式时才能获取。

<div style='left=20px'></div>

2.4   offsetLeft与style.left的区别

2.5  同时存在margin-left与left时的offsetLeft

<div class="parent"><div class="child" style='left:20px'></div></div>

offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解-LMLPHP

需要注意的是,当margin与left,外边距与定位偏移量同时存在时,它们是累加的,并不会发生重叠。

3.  offsetHeight,clientHeight与scrollHeight

我们先来看看这三者的含义

offsetHeight:获取元素的宽度,包含border,padding,不包含margin。

clientHeight:获取元素内容区域的宽度,包括padding与元素的width,不包含border与margin,一般用于获取视窗高度,不包括溢出不可见部分的高度。

scrollHeight:只读属性是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容包含padding和width,不包含border与margin

4.clientTop,scrolleTop

scrolleTop:获取元素滚动后的距离文档顶部的距离,也就是滚动条滚动的距离。

clientTop:获取元素边框的厚度,也就是border的宽度。

有个公式:element.scrollHeight - element.scrollTop === element.clientHeight用于判断滚动条是否滚动到底。

05-07 15:46