扒一扒offsetleft,srollleft,pagex,clientx,postion().left等精确位置的获取与理解
先上个pc端和手机端的图:
说明:上面的属性,都是in这个div的属性值。我是点击的in这个div的左上角,所以pageX、pageY是40。
HTML:
<div class="out"> <div class="in"></div> </div>
css:
.out{ width: 300px; height: 300px; background: skyblue; overflow: hidden; } .in{ width: 100px; height: 100px; padding: 50px; margin:20px; background: salmon; border: 5px solid red; overflow: auto; position: relative; top: 20px; left:20px; }
备注:out这个div的overflow:hidden属性是必须加上去的,因为如果不加,那么in这个div设置的margin-top效果就会体现在out这个div上,即out这个div与in这个div上边线重合,out这个div会体现出margin-top的效果。
除了设置overflow:hidden这个属性外,还可以设置:display:inline-block或者table-cell,或者设置out这个div浮动,或者在out这个div里加点内容,比如文字等也不会出现这个边线重合的情况。
注意:除了pageX/Y,clientX/clientY,screenX/screenY 获取都是通过e.XXX获取之外,其它的都能直接通过Jq或者Js获取。
在手机端是指加了<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />这个meta头部
这些不针对IE浏览器,不针对IE浏览器,不针对IE浏览器。没测试过
1.offsetXXX家族
1)offsetWidth / offsetHeight :获取元素的可见高度值.包括边框和内部空白补丁.但超出元素的内容则不被计算。$(".in")[0].offsetWidth/offsetHeight //js
在pc端:
offsetHeight = clientHeight + border + 横向滚动条(横向,横向,就是overflow-x:scroll出现的那个滚动条的高度,默认应该都是17px);
= height(设置的高度) + border(上下border) + padding(上下padding)
offsetWidth = clientWidth + border + 纵向滚动条(纵向,纵向,就是overflow-y:scroll出现的那个滚动条的宽度,默认应该都是17px);
= width(设置的宽度) + border(左右border)+ padding(左右padding)
在手机端:
offsetHeight = clientHeight + border;手机端都不算滚动条
= height + padding + border
offsetWidth同理
2)offsetTop / offsetLeft:获取相对于父级(有css定位的元素,如果没有就是body元素)距离 顶部的值/左边的值。$(".in")[0].offsetTop/offsetLeft //js
由图片可知道,这两个属性值都是40,那么40是怎么来的呢?in这个div设置了“相对定位属性”,top和left都是设置的是20,margin也设置的是20,由于margin是外边距,相当于把in这个div在原来的基础上偏移了20px
所以,在这个例子里面,offsetTop / offsetLeft就是“相对定位”值top / left值加上margin的值。通俗讲就是计算该元素上边框 / 左边框与父级的距离
3)offset().top / offset().left:这两个属性是jQuery操作css的函数。offset() 方法返回或设置匹配元素相对于文档的偏移。 $(".in").offset().top //jq
在这个例子里面,这两个属性和上面js的offsetTop属性的值是相等的,那么它们是一样的吗? no no no
!!!我给out这个div加上margin:20px和position:relative的属性之后,js的offsetTop / offsetLeft还是40,而offset()方法得到的值就是60了。
所以它们还是有区别的,如果父级没有设置css定位:绝对,fixed,相对这三种定位,那么offsetTop和offsetLeft和offset()方法获取到的值就是一样的,如果有css定位,offsetTop/offsetLeft就是相对于有定位的父级的距离顶部/左部的值
2.clientXXX家族
1)clientX/clientY:相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。 e.clientX/clientY
在上面的例子里面,由于点击的是in这个div的左上角,即鼠标点击的位置离in这个div的左端和上端的距离是0,所以这里的clientX就是距离浏览器窗口最左边的距离,即out这个div的left值与in这个div的margin-left值之和就是clientX的值。
2)clientWidth/clientHeight:理解为内容可视区域的高度,不包含border,不包含border,不包含border;padding是算在里面的。$(".in")[0].clientWidth // js
在pc端:
clientHeight=height(设置的高度) + padding - 横向滚动条的高度,如果没有滚动条就不减;
clientWidth=width(设置的高度) + padding - 纵向滚动条的高度,如果没有滚动条就不减;
在手机端:
clientHeight=height(设置的高度) + padding;
clientWidth同理
3)clientLeft/clientTop:表示一个元素的左边框/上边框的宽度,clientLeft是只读的。$(".in")[0].clientLeft //js
所以在上面的例子里面,clientLeft的值为5,因为border的left值为5。clientTop同理。
3.scrollXXX家族:
1)scrollTop/scrollLeft:一个元素的 scrollTop 值是这个元素的顶部到它的最顶部可见内容(的顶部)的距离的度量。通俗来讲就是滚动条滚动的距离。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0。$(".in").scrollTop()。 //jq 。
所以,在上面的例子里,scrollTop与scrollLeft都是点击获取的。滚动条滚动了多少,scrollTop与scrollLeft的值就为多少
2)scrollWidth/scrollHeight:一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容,没有垂直滚动条的情况下,scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding,但不包括元素的border和margin。$(".in")[0].scrollWidth //js 通俗来讲就是:
scrollHeight = clientHeight + 滚动条滚动到最底部的距离
= height(设置的高度) + padding + 滚动条滚动到最底部滚动的距离
scrollWidth = clientWidth + 滚动条滚动到最右部的距离
= width(设置的宽度) + padding + 滚动条滚动到最右部滚动的距离
4.pageX/pageY:
这两个属性是鼠标指针的位置,相对于文档的左边缘。通俗来讲就是点击的位置相对整个页面的坐标。是jQuery事件。e.pageX
pageX:在上面的例子中,由于点击的是in这个div的左上角,所以鼠标点击的位置距离in这个div最左端为0,然后,in这个div又距离左部有40的位置。所以最终结果为40
pageY同理
5.screenX/screenY
相对于用户显示器屏幕左上角的X,Y坐标。注意是当前显示器屏幕,当前显示器屏幕,当前显示器屏幕哦。e.screenX
所以这里的screenX是40,因为,out这个div距离显示器屏幕的左部为20,然后in这个div的margin为20,所以最终结果为40。
由于不清楚body距离显示屏屏幕最上端的距离是多少,所以不能口算出screenY的大小。
6.position().left/position().top
这两个属性是jQuery的css操作方法。返回匹配元素相对于父元素的位置(偏移),需设置了定位的元素。$(".in").position().left //jq
在上面的例子中,in这个div设置了“相对定位”,left和top值都为20,所以这里的position().left和position().top的值都是20。如果in这个div不设置“相对定位”,那么这两个的值都为0