1、线上链接地址
浏览器坐标属性
2、screen系列
2.1、screenX:
鼠标位置相对于用户屏幕水平偏移量
2.2、screenY:
鼠标位置相对于用户屏幕垂直偏移量
3、client系列
3.1、clientX:
鼠标位置相对于文档的左边距(不随页面滚动而改变)
3.2、clientY:
鼠标位置相对于文档的上边距(不随页面滚动而改变)
3.3、clientHeight:
表示元素节点的 CSS 高度(单位像素),只对块级元素生效,对于行内元素返回0。如果块级元素没有设置 CSS 高度,则返回实际高度
clientHeight = height + padding
3.4、clientWidth:
表示元素节点的 CSS 宽度(单位像素),只对块级元素有效,对于行内元素返回0。也是只包括元素本身的宽度和padding,如果有垂直滚动条,还要减去垂直滚动条的宽度
clientWidth = width + padding
3.5、clientLeft:
元素节点左边框(left border)的宽度(单位像素),不包括左侧的padding和margin。如果没有设置左边框,或者是行内元素(display: inline),该属性返回0
3.6、clientTop:
元素节点顶部边框的宽度(单位像素),不包括顶部的padding和margin。如果没有设置上边框,或者是行内元素(display: inline),该属性返回0
4、scroll系列
4.1、scrollWidth:
获取元素整个内容的宽度 (包含看不见的) ,如果有滚动条(滚动条会占用部分宽高),不计算滚动条的宽高
4.2、scrollHeight:
获取元素整个内容的高度 (包含看不见的) ,如果有滚动条(滚动条会占用部分宽高),不计算滚动条的宽高
4.3、scrollTop(可读写):
表示当前元素的垂直滚动条向下侧滚动的像素数量
4.4、crollLeft(可读写):
表示当前元素的滚动水平滚动条向右的像素数量
判断滚动条垂直是否滚动到底 垂直滚动条 scrollHeight -scrollTop = clientHeight
判断滚动条水平是否滚动到底 水平滚动条 scrollWidth -scrollLeft = clientWidth
5、offset系列
5.1、offsetX:
鼠标位置相对被触发dom的左上角的水平距离,以内容区左上角为基准点(不包括边框),如果触发点在边框上会返回负值
5.2、offsetY:
鼠标位置相对被触发dom的左上角的垂直距离,以内容区左上角为基准点(不包括边框),如果触发点在边框上会返回负值
5.3、offsetHeight:
表示元素的 CSS 垂直高度(单位像素),包括元素本身的高度、padding 和 border,以及水平滚动条的高度(如果存在滚动条), 如果元素的 CSS 设为不可见(比如display: none;),则返回0
offsetHeight = height + border + padding
5.4、offsetWidth:
表示元素的 CSS 水平宽度(单位像素),包括元素本身的宽度、padding 和 border,以及垂直滚动条的宽度(如果存在滚动条), 如果元素的 CSS 设为不可见(比如display: none;),则返回0
offsetWidth = width + border + padding
5.5、offsetParent:
返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素
5.6、offsetLeft:
当前元素和定位父元素之间的偏移量(如果没有设置定位父元素,就是相对于左上角的位置,left是最左边的距离)
5.7、offsetTop:
当前元素和定位父元素之间的偏移量(如果没有设置定位父元素,就是相对于左上角的位置,top是距离顶部的距离)
6、其他
注意:当浏览器body出现滚动条时,pageY和clientY才不一致!
6.1、pageX:
鼠标位置相对于文档的左边距(随页面滚动而改变)
e.pageX = e.clientX + e.target.scrollLeft;
6.2、pageY:
鼠标位置相对于文档的上边距(随页面滚动而改变)
e.pageY = e.clientY + e.target.scrollTop;
6.3、layerX:
有定位属性的父元素的左上角的水平距离(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角(包含边框)
6.4、layerY:
有定位属性的父元素的左上角的垂直距离(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角(包含边框)
6.5、getBoundingClientRect:
用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗(可视范围)的位置
getBoundingClientRect方法的所有属性,都把边框(border属性)算作元素的一部分
- x:元素左上角相对于视口的横坐标
- y:元素左上角相对于视口的纵坐标
- height:元素高度
- width:元素宽度
- left:元素左上角相对于视口的横坐标,与x属性相等
- right:元素右边界相对于左边视口的横坐标(等于x + width)
- top:元素顶部相对于视口的纵坐标,与y属性相等
- bottom:元素底部相对于上边视口的纵坐标(等于y + height)