JavaScript DOM 9 - 元素的尺寸与位置

2024年5月4日 200次阅读 来源: nanaistaken

1: 取得页面上某个元素在视口坐标系的位置和元素的尺寸：

element.getBoundingClientRect():

{    
    left:8
    top:104
    right:1432
    bottom: 158
    width:1424
    height:54   
}

以上要领返回一个对象，包括六个元素，分别是此元素左上角和右下角的坐标，以及元素的宽和高。但是在原始的IE中并不返回width和height, 不过能够本身经由过程坐标计算出来。
值得注意的是getBoundingClientRect()不是及时的，在挪用此函数后，用户再转动或许转变浏览器窗口大小，它返回的值并不会更新。

针对一切的文档元素，它们都定义了三组变量跟尺寸和位置有关：

1: 包括border的尺寸

offsetWidth//返回包括border在内的宽度
offsetHeight//返回包括border在内的高度
offsetTop//元素与其offsetParent之间的垂直间隔
offsetLeft//元素与其offsetParent之间的程度间隔
offsetParent//

2: 不包括border的尺寸

clientWidth//返回不包括border在内的宽度
clientHeight//返回不包括border在内的高度
clientLeft//
clientTop//

3: 元素的转动条

scrollWidth//关于可转动的元素（overflow:scroll）的元素，返回元素内容的宽度
scrollHeight//关于可转动的元素（overflow:scroll）的元素，返回元素内容的高度
scrollLeft//关于可转动的元素（overflow:scroll）的元素，返回/设置元素的转动条向右侧转动的px
scrollTop//overflow:scroll）的元素，返回/设置元素的转动条向下边转动的px
    原文作者：nanaistaken
    原文地址: https://segmentfault.com/a/1190000010018980
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞