窗口所在位置，元素的宽高

最新推荐文章于 2024-07-31 09:31:00 发布

wybxzht

最新推荐文章于 2024-07-31 09:31:00 发布

阅读量253

点赞数

分类专栏： Javascript 文章标签： js

本文链接：https://blog.csdn.net/wybxzht/article/details/108454327

版权

本文介绍了浏览器窗口及元素的各种尺寸属性，包括Window视图的screeLeft、screenTop、outerWidth、innerWidth等，页面视图的innerHeight，Document文档视图的clientWidth、clientHeight，以及滚动条距离。同时讲解了元素的offsetWidth、offsetHeight、scrollWidth、scrollHeight、clientWidth、clientHeight等属性，和getBoundingClientRect()方法的应用。

摘要由CSDN通过智能技术生成

Window视图：

浏览器相对于屏幕的位置
screeLeft
screeTop
screenX
screeY

浏览器窗口大小
outerWidth
outerHeight

页面视图的大小
innerWidth
innerHeight

Document文档视图

浏览器窗口可视区宽高（不包括浏览器控制台、菜单栏、工具栏、滚动条）
document.documentElement.clientWidth
document.documentElement.clientHeight
（低版本IE的innerWidth、innerHeight的代替方案）

document.documentElement.offsetHeight 获取整个文档的高度（包含body的margin）
document.body.offsetHeight 获取整个文档的高度（不包含body的margin）

滚动条滚动的距离
document.documentElement.scrollTop
document.documentElement.scrollLeft

元素视图

一个元素的布局宽高（borde+padding+scrollbar+width)
offsetWidth
offsetHeight
当前元素相对于其 offsetParent 元素内边距的距离
offsetTop
offsetLeft
(offsetParent : 返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th