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

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

element.clientWidth

element.clientHeight

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

element.offsetWidth

element.offsetHeight

3、上边框、左边框

element.clientTop

element.clientLeft

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

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

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

element.offsetTop

element.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获取元素的位置与尺寸 1、内高度、内宽度: 内边距 + 内容框clientWidthclientHeigh...
    轻丨尘阅读 4,084评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,118评论 1 45
  • 参考文献segmentfault获取屏幕宽高js中位置与大小的获取方法深入理解客户区尺寸clientcss cli...
    小杺阅读 9,017评论 0 2
  • Element对象对应网页的HTML标签元素。每一个HTML标签元素,在DOM树上都会转化成一个Element节点...
    许先生__阅读 5,843评论 0 2
  • 近来心里空唠唠的,儿子离开家去别的城市读书了,以前听朋友说起孩子离家的情况都是挺伤感的,有的是彻夜不眠,有的...
    Eleni阅读 3,056评论 0 6