自建个人网站企业网站优化服务公司
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）