-
屏幕的分辨率(基本上没什么屌用)
image.png
window.screen.width
window.screen.height
-
可用高度(也就是屏幕高度减去任务栏的高度)
image.png
window.screen.availHeight
window.screen.availWidth
- 浏览器可见区域的大小(不包括地址栏之类的,就算内容被撑开也不变)
document.documentElement 就是 html 元素
document.documentElement.clientWidth
document.documentElement.clientHeight
- body的大小
document.body.clientWidth
document.body.clientHeight
坐标:
- screenX/screenY: 位于屏幕左上角的坐标(基本上没什么屌用)
- pageX/pageY:: 相对于浏览器可用区域(不包括地址栏之类的,加上页面滚动的距离)左上角的坐标,例子:
- clientX/clientY: 相对于浏览器可用区域(不包括地址栏之类的,也不考虑滚动)左上角的坐标,例子:
- offsetX/offsetY:就是距离触发事件的元素的左上角(包括padding)的距离,简单实用,
也可以用以下代码代替:
const rect = 触发事件的对象.getBoundingClientRect();
my_offsetx = e.clientX - rect.left;
my_offsety = e.clientY - rect.top;
网友评论