JS中获取dom元素高度相关方法

本文介绍: 元素的实际距离左边界的距离：document.getElem entById(“div”).offsetLe ft。元素的实际距离上边界的距离：d o cu ment.getElementById(“di v”).offsetTop。元素的实际宽度：d o cu ment.getElementById(“di v”).offsetWid th。网页可视区域高： docu ment.body.offsetHei g ht (包括边距的高)网页可视区域宽： docu ment.body.offsetWid th (包括边距的宽)

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

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

网页可视区域宽： docu ment.body.clientWid th
网页可视区域高： docu ment.body.clientHei g ht
网页可视区域宽： docu ment.body.offsetWid th (包括边距的宽)
网页可视区域高： document.b od y.offsetHeight (包括边距的高)
网页正文全文宽： document.b od y.scrollWid th
网页正文全文高： document.b od y.sc rollHeight
网页被卷去的高： document.body.sc rollTop
网页被卷去的左： document.body.sc rollLeft

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

元素的实际高度：document.getElementById(“di v”).offsetHeight
元素的实际宽度：document.getElementById(“di v”).offsetWidth
元素的实际距离左边界的距离：document.getElementById(“di v”).off setLeft
元素的实际距离上边界的距离：document.getElementById(“di v”).offsetTop

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

属性	说明
clientX	以浏览器左上角为原点，定位 x轴坐标
clientY	以浏览器左上角为原点，定位y轴坐标
offsetX	以当前事件的目标对象左上角为原点，定位 x轴坐标
offsetY	以当前事件的目标对象左上角为原点，定位y轴坐标
pageX	以Document对象(即文本窗口)左上角为原点，定位 x轴坐标
pageY	以Document对象(即文本窗口)左上角为原点，定位y轴坐标
screenX	电脑屏幕左上角为原点，定位 x轴坐标
screenY	电脑屏幕左上角为原点，定位y轴坐标
layerX	最近的绝对定位的父元素(没有的话就位Document对象)左上角为原点，定位x轴坐标
layerY	最近的绝对定位的父元素(没有的话就位Document对象)左上角为原点，定位y轴坐标