DOM中的位置和大小(总结)

Posted yuanjunjundebo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM中的位置和大小(总结)相关的知识,希望对你有一定的参考价值。

【window】window对象

一、position位置
screenLeft/screenTop (适用于火狐和谷歌)
screenX/screenY (适用于IE)

二、size大小

innerHeight/innerWidth 显示文档的区域大小
outerHeight/outerWidth 这个窗口大小包括工具栏、滚动条

【element】元素对象

一、position位置

offsetLeft / offsetTop 边框盒的位置,一第一个定位(position:absolute)的父级元素为准

二、size大小

clientWidth/clientHeight 内容+内边距(填充盒)
offsetWidth/offsetHeight 内容+内边距+边框(边框盒)

【mouse】鼠标事件对象

clientX/clientY 相对于视口的坐标
pageX/pageY 相对于事件源的位置
offsetX/offsetY 相对于整个文档的位置
screenX/screenY 相对于屏幕的位置

 

以上是关于DOM中的位置和大小(总结)的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript中的各种宽高以及位置总结

web性能优化DOM的reflow 和repaint

Web APIs DOM- 网页特效篇-元素大小和位置

根据屏幕大小重新排列 DOM 的最佳方法

Javascript中的DOM实现显示鼠标的空间位置

JavaScript获取DOM元素位置和尺寸大小