JS: 关于元素大小和距离的有关的属性总结

简介:

Element的属性中关于距离的属性

  1. 偏移量

    offsetHeight:元素在垂直方向上所占空间的大小,包括(上下边框和水平滚动条的高度,不包括外边距)
    offsetWidth:元素在水平方向上所占空间的大小,包括(左右边框和垂直滚动条的宽度)
    offsetLeft:元素的左外边框与包含元素的左内边框的距离
    offsetTop:元素的上外边框与包含元素的上内边框的距离
    offsetparent:距离元素最近的并且具有大小的元素
    

    如果想知道某个元素在页面上的偏移量,只需要将这个元素的offsetTop或者offsetLeft与offsetparent的相同属性相加,不断迭代至根元素,就可以得到基本准确的值。

  2. 客户区大小

    clientWidth:元素左内边框到元素右内边框的距离(内容区加内边距)
    clientHeight:元素上内边框到元素下内边框的距离(同上)
    

    指的元素内容以及元素内边距所占空间的大小

  3. 滚动大小

    scrollHeight:没有滚动条的情况下,元素内容的总高度(内容区加内边距)
    scrollWidth:没有滚动条的情况下,元素内容的总宽度(同上)
    scrollLeft:被隐藏在元素内容区域左侧的像素数,通过设置这个可以改变元素的滚动位置
    scrollTop:被隐藏在元素内容区域上方的像素数,通过设置这个可以改变元素的滚动位置
    

    带有垂直滚动条的页面中,document.documentElement.scrollHeight就是页面内容区总高度,在没有滚动条的页面中,则document.documentElement.scrollHeight指定的值随浏览器不确定,在chrome中,document.documentElement.scrollHeight指的是视口高度,document.documentElement.scrollWidth指的是视口宽度。

    我用chrome测试了一下,发现scrollHeight和offsetHeight好像一直是相同的值。

  4. DOMRect

    bottom:1028 height:1020 left:8 right:928 top:8 width:920 x:8 y:8 

    在元素中调用getBoundingClientRect()会返回含有以上参数的DOMRect对象,top,bottom表示元素上/下内边框到视口顶端距离,left和right表示元素左/右内边框到视口左端距离。感觉这个api很方便,以后就用它了。

event中关于距离属性

当触发鼠标事件的时候,事件对象会有一些属性帮助定位鼠标指针

  1. 客户区坐标位置

    clientX:鼠标指针在视口中的水平坐标 clientY:鼠标指针在视口中的垂直坐标 
  2. 屏幕坐标位置

    screenX:鼠标指针在屏幕(桌面)中的水平坐标 screenY:鼠标指针在屏幕中的垂直坐标 
  3. 偏移量

    offsetX:光标相对于目标元素(event.target指向的元素;触发该事件的元素)边界(内边框)的x坐标 offsetY:光标相对于目标元素边界的y坐标 

    当光标指针在目标元素的内边框之外,外外边距之内的时候,offsetX/Y为负值。


原文发布时间:2018-07-05
原文作者:静默行
本文来源 掘金如需转载请紧急联系作者
相关文章
|
15天前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
30 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
12天前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
19 2
|
1月前
|
JavaScript 前端开发
JavaScript基础知识-枚举对象中的属性
关于JavaScript基础知识中如何枚举对象属性的介绍。
28 1
JavaScript基础知识-枚举对象中的属性
|
23天前
|
JavaScript 前端开发
js删除数组最后一个元素
js删除数组最后一个元素
|
1月前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中,有多种方法定位和选择页面元素。
|
1月前
|
前端开发 JavaScript
前端ES5 | js —添加元素方法
前端ES5 | js —添加元素方法
|
11天前
|
JavaScript 前端开发
JavaScript从二维数组抽取元素组成新数组的三种方法
JavaScript从二维数组抽取元素组成新数组的三种方法
|
11天前
|
JavaScript 前端开发
JavaScript从二维数组抽取若干元素组成新二维数组
JavaScript从二维数组抽取若干元素组成新二维数组
|
1月前
|
存储 JavaScript 前端开发
JS中的数组有哪些常用操作函数和属性
【9月更文挑战第7天】JS中的数组有哪些常用操作函数和属性
12 1
|
14天前
|
JavaScript 前端开发
用JavaScript编程定义二维数组并初始化,然后输出元素值
用JavaScript编程定义二维数组并初始化,然后输出元素值