哪个网站做效果图好,dw怎么做网站地图,it做私活的网站,植树节ppt模板下载免费版1、线上链接地址
浏览器坐标属性 2、screen系列
2.1、screenX#xff1a;
鼠标位置相对于用户屏幕水平偏移量
2.2、screenY#xff1a;
鼠标位置相对于用户屏幕垂直偏移量
3、client系列
3.1、clientX:
鼠标位置相对于文档的左边距#xff08;不随页面滚动而改变
鼠标位置相对于用户屏幕水平偏移量
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 widthtop元素顶部相对于视口的纵坐标与y属性相等bottom元素底部相对于上边视口的纵坐标等于y height
