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

本文介绍了JavaScript中获取DOM元素高度和宽度的各种属性,包括网页可视区域、正文全文及被卷去部分的高度和宽度,以及DOM元素的实际尺寸和位置。同时讲解了鼠标事件中涉及的宽高属性,如clientX/Y、pageX/Y、scrollLeft/scrollTop以及offsetX/Y。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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以浏览器左上角为原点,定位x轴坐标
clientY以浏览器左上角为原点,定位y轴坐标
offsetX以当前事件的目标对象左上角为原点,定位x轴坐标
offsetY以当前事件的目标对象左上角为原点,定位y轴坐标
pageX以Document对象(即文本窗口)左上角为原点,定位x轴坐标
pageY以Document对象(即文本窗口)左上角为原点,定位y轴坐标
screenX电脑屏幕左上角为原点,定位x轴坐标
screenY电脑屏幕左上角为原点,定位y轴坐标
layerX最近的绝对定位的父元素(没有的话就位Document对象)左上角为原点,定位x轴坐标
layerY最近的绝对定位的父元素(没有的话就位Document对象)左上角为原点,定位y轴坐标

各属性对整个屏幕以及整个网页的关系
在这里插入图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值