元素宽高及偏移情况汇总-JavaScript
Posted kreios
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了元素宽高及偏移情况汇总-JavaScript相关的知识，希望对你有一定的参考价值。
位置属性
window.addEventListener(‘mouseout‘, (e) => {
// e 为鼠标事件
console.log(e);
})
| 属性 | 含义 |
|---|---|
| clientX、clientY | 鼠标位置距离当前body可视区域的x，y坐标 |
| pageX、pageY | 鼠标位置距离当前整个body的x，y坐标，包括卷去的 |
| screenX、screenY | 鼠标位置距离当前电脑屏幕的x，y坐标 |
| x、y | 同screenX、screenY |
| offsetX、offsetY | 鼠标位置距离当前绑定元素的x，y坐标 |
| offsetLeft,offsetTop | 鼠标位置相对于带有定位的父盒子的x，y坐标 |
宽高属性
| 属性 | 含义 | 滚轴包含情况 |
|---|---|---|
| window.innerWidth、window.innerHeight | 窗口的文档显示区的宽高 | 不包含 |
| window.outerWidth、window.outerHeight | 窗口的文档显示区的宽高 | 包含 |
| document.documentElement.clientWidth(clientHeight) | 窗口文档显示区的宽高 | 不包含 |
更新中...如有错误，还请在评论区指正
以上是关于元素宽高及偏移情况汇总-JavaScript的主要内容，如果未能解决你的问题，请参考以下文章