文章目录
- offsetX & offsetY
- clientX & clientY
- pageX & pageY
- screenX & screenY
- innerHeight & innerWidth
- offsetHeight & offsetWidth
- offsetTop & offsetLeft
- scrollHeight & scrollWidth
- scrollTop & scrollLeft:
- 与scrollHeight和scrollWidth的区别
- 浏览器窗口客户端区域:
offsetX & offsetY
鼠标事件或者触发事件相对于事件的元素左边缘的水平和垂直偏移量 (就是以当前触发的元素为基底,鼠标位于你触发元素所在的位置)
clientX & clientY
是指鼠标事件在浏览器可视窗口的位置
pageX & pageY
是指鼠标事件在浏览器整个页面中(包括滚动部分)的中的位置
screenX & screenY
是一个用于获取浏览器窗口相对于屏幕左上角的水平/垂直坐标位置的属性。
screenX 属性通常用于确定浏览器窗口在屏幕上的位置,或者与其他元素的位置进行比较。例如,可以使用 screenX 属性来确定浏览器窗口在屏幕上的水平位置,以便在特定位置显示其他元素。
innerHeight & innerWidth
指整个浏览器可视窗口的大小 不包括浏览器的工具栏、地址栏等
offsetHeight & offsetWidth
返回触发元素的的像素的高度/宽度,包括该元素的高度的垂直的内边距和边框 且是一个整数
offsetTop & offsetLeft
表示元素的上外边/左边框至offsetParent元素的上内边框/左边框之间的像素距离(若无父元素则以浏览器为offsetParent)
scrollHeight & scrollWidth
表示元素的滚动内容的总高度/宽度 包括被隐藏的内容,即使在可见区域外也会计算在内。如果元素没有发生垂直滚动,则 scrollHeight 的值等于元素的实际高度。可以通过设置元素的滚动位置(scrollTop)来访问超出可见范围的内容。
scrollTop & scrollLeft:
表示被隐藏在内容区域的上方/左边的高度/宽度
与scrollHeight和scrollWidth的区别
scrollTop和scrollWidth一般用于获取或者设置元素的滚动位置 ,而scrollHeight和scrollWidth用于获取元素内容的完整的高度
浏览器窗口客户端区域:
浏览器窗口客户区域指的是浏览器窗口中用于显示网页内容的区域,即不包括浏览器工具栏、标签栏、地址栏和滚动条等部分。它是网页可视区域的一部分。