JS 获取元素大小、偏移量及鼠标位置

JS 获取元素宽度、偏移量的几个常用属性的方法。

获取元素宽度

  width clientWidth offsetWidth scrollWidth
组成 content content+padding content+padding+border Content+padding+滚动条宽度
是否只读

width

  • width=content
  • style.width 的返回值自带单位px;
  • 这个width的具体组成部分是由盒子模型决定的,默认的width即为内容区宽度;
  • 当样式写在行内的时候,如 <div id="box" style="width:100px">时,用style.width可以获取元素的宽度。但是,当样式写在样式表中时,如 #box{ width: 100px; }, 而style.width所返回的值为空。

clientWidth

  • clientWidth=content+padding
  • 只读属性;
  • 当元素超出父容器时,宽度即为可视区宽度;

offsetWidth

  • offsetWidth=content+padding+border
  • 只读属性;
  • 当元素超出父容器时,宽度即为可视区宽度;

scrollWidth

  • scrollWidth=Content+padding+滚动条宽度(scrollLeft)
  • 只读属性;
  • 元素的真实宽度,当超出父元素并有滚动条时,scrollWidth=clientWidth+scrollLeft,不包含border;

获取元素偏移距离

  scrollLeft left
描述 滚动条宽度 超出父容器的左侧偏移距离
是否只读

scrollLeft

  • scrollLeft为超出父容器左侧滚动条宽度

left

  • left为超出父容器左侧的偏移距距离
  • 只在开启定位,脱离文档流后有效

获取鼠标位置

  • 鼠标位置属性全部可写
clientX offsetX pageX screenX
以浏览器窗口左上顶角为原点,定位 x 轴坐标 以当前事件的目标对象左上顶角为原点,定位 x 轴坐标 以 document 对象(即文档窗口)左上顶角为原点,定位 x 轴坐标,因此当页面有左侧滚动条时,pageX=clientX+滚动条宽度 计算机屏幕左上顶角为原点,定位 x 轴坐标

位置相关的几个常见方法

  getBoundingClientRect scrollTo scroll scrollby
调用方式 dom.getBoundingClientRect() scrollTop(left,top)或scrollTop(optionObj) scroll(left,top)或scroll(optionObj) scrollby(left,top)或scrollby(optionObj)
描述 该方法会返回一个矩形对象,用于获取元素相对于浏览器视口的位置以及自身大小 滚动到文档的特定位置 滚动到文档的特定位置 滚动一段特定距离

getBoundingClientRect

  • 返回值示例
{
    bottom: 615.125
    height: 64
    left: 241.60000610351562
    right: 1521.6000061035156
    top: 551.125
    width: 1280
    x: 241.60000610351562
    y: 551.125
}
  • 与我们平时理解的不同,该对象中的left和right都是相对于浏览器左侧视口的距离,同理bottom和top是相对于上侧的;
  • 当视口存在滚动条并发生滚动时,left、right等属性值会随之改变,如果想获取距离浏览器窗口的绝对距离,可以考虑将当前的left加上window.offsetX
  • 通过height和width可以获取到元素实际大小

下一章:JVM内存管理面试常见问题全解

JVM 内存管理常见面试问题:一、什么是JVM:Java Virtual Machine(Java虚拟机)是java程序实现跨平台的⼀个重要的⼯具(部件)。HotSpot VM,相信所有Java程序员都知道,它是Sun JDK和OpenJD ...