首页 > web前端 > js教程 > 原生JS获取元素的位置与尺寸

原生JS获取元素的位置与尺寸

一个新手
发布: 2017-10-18 09:53:39
原创
1360 人浏览过

1、内高度、内宽度: 内边距 + 内容框

clientWidth
clientHeight
登录后复制

2、外高度,外宽度: 边框 + 内边距 + 内容框

offsetWidth
offsetHeight
登录后复制

3、上边框、左边框

clientTop
clientLeft
登录后复制

4、元素的大小及其相对于视口的位置

getBoundingClientRect()
//x\y:元素的左上角和父元素左上角的距离
//width/height:边框 + 内边距 + 内容框
//top:元素的上边界和父元素上边界的距离
//left:元素的左边界和父元素左边界的距离
//right:元素的右边界和父元素的左边界的距离
//bottom:元素的下边界和父元素上边界的距离
登录后复制

5、上边偏移量,左边的偏移量

offsetTop
offsetLest
登录后复制

6、可视区域的大小

document.documentElement.clientWidth
document.documentElement.clientHeight
登录后复制

7、页面的实际大小

document.documentElement.scrollWidth
document.documentElement.scrollHeight
登录后复制

8、窗口左上角 与 屏幕左上角的 距离

window.screenX、
window.screenY
登录后复制

9、屏幕宽高

window.screen.width
window.screen.height
登录后复制

10、屏幕可用宽高(去除任务栏)

window.screen.availWidth
window.screen.availHeight
登录后复制

11、窗口的内高度、内宽度(文档显示区域+滚动条)

window.innerWidth
window.innerHeight
登录后复制

12、窗口的外高度、外宽度

window.outerWidth
window.outerHeiht
登录后复制

以上是原生JS获取元素的位置与尺寸 的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板