目录

1、dom元素获取宽高的一些属性2、鼠标事件中常用高度宽度

1、dom元素获取宽高的一些属性

javascript中获取dom元素高度和宽度的属性如下：

网页可视区域宽： document.body.clientWidth

网页可视区域高： document.body.clientHeight

网页可视区域宽： document.body.offsetWidth (包括边距的宽)

网页可视区域高： document.body.offsetHeight (包括边距的高)

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

对应的dom元素的宽高常用的属性：

元素的实际高度：document.getElementById(“div”).offsetHeight

元素的实际宽度：document.getElementById(“div”).offsetWidth

元素的实际距离左边界的距离：document.getElementById(“div”).offsetLeft

元素的实际距离上边界的距离：document.getElementById(“div”).offsetTop

2、鼠标事件中常用高度宽度

各属性对整个屏幕以及整个网页的关系

clientX 和 clientY 是点击位置与可视区距离的宽高pageX 和 pageY 是点击位置与整个页面距离的宽高scrollLeft 和scrollTop 是当前可视区的左边框和顶部边框距离页面左侧和顶部的距离（可理解为滚动距离）offsetX 和offsetY 是你所点击的位置距离点击元素的左侧和顶部的距离