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

zhaot 发布于2019-08-20 17:42 / 2194人阅读

摘要：获得页面上某个元素在视口坐标系的位置和元素的尺寸以上方法返回一个对象，包含六个元素，分别是此元素左上角和右下角的坐标，以及元素的宽和高。

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

GPU云服务器云服务器 dom元素位置 javascript的dom对象 javascript的dom编程 DOM元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83803.html

前端性能优化（JavaScript补充篇）

摘要：而像和会增加作用域链的长度，所以也会降低性能。但是用获取一些属性时，会不由自主地强迫队列中的所有渲染事件前不完成。在条件增加时，所带来的性能负担要高于，因此建议使用。它代价昂贵，且容易失控。正巧看到在送书，于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告：更多内容可以看我的博客以下内容均来自《高性能JavaScript》 JavaScript文件加载 ...

molyzzx 2019-08-19 14:42 评论0 收藏0
前端性能优化（JavaScript补充篇）

摘要：而像和会增加作用域链的长度，所以也会降低性能。但是用获取一些属性时，会不由自主地强迫队列中的所有渲染事件前不完成。在条件增加时，所带来的性能负担要高于，因此建议使用。它代价昂贵，且容易失控。正巧看到在送书，于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告：更多内容可以看我的博客以下内容均来自《高性能JavaScript》 JavaScript文件加载 ...

taoszu 2019-08-01 14:38 评论0 收藏0
【前端性能优化】高性能JavaScript整理总结

摘要：然后执行环境会创建一个活动对象，活动对象作为函数运行的变量对象，包含所有局部变量命名参数参数集合和，当执行环境销毁，活动对象也被销毁。高性能JavaScript整理总结关于前端性能优化：首先想到的是雅虎军规34条然后最近看了《高性能JavaScript》大概的把书中提到大部分知识梳理了下并加上部分个人理解这本书有参考雅虎特别性能小组的研究成果，所以跟34 军规有很多相似之处有不当之...

zzbo 2019-08-02 16:01 评论0 收藏0
【前端性能优化】高性能JavaScript整理总结

摘要：然后执行环境会创建一个活动对象，活动对象作为函数运行的变量对象，包含所有局部变量命名参数参数集合和，当执行环境销毁，活动对象也被销毁。高性能JavaScript整理总结关于前端性能优化：首先想到的是雅虎军规34条然后最近看了《高性能JavaScript》大概的把书中提到大部分知识梳理了下并加上部分个人理解这本书有参考雅虎特别性能小组的研究成果，所以跟34 军规有很多相似之处有不当之...

bovenson 2019-08-22 15:41 评论0 收藏0