offsetTop、offsetLeft、offsetWidth、offsetHeight原理使用介绍

简介: 假设 obj 为某个 HTML 控件。 offsetTop、offsetLeft obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。

假设 obj 为某个 HTML 控件。

offsetTop、offsetLeft

  • obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。具体算法请参见 offsetTop、offsetLeft 算法
  • obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素。

offsetWidth、offsetHeight

  • obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素。具体算法请参见 offsetWidth、offsetHeight 算法
  • obj.offsetHeight 指 obj 控件自身的绝对高度,不包括因 overflow 而未显示的部分,也就是其实际占据的高度,整型,单位像素。

我们对前面提到的 offsetParent 作个说明。

offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。offsetTop 与 offsetParent 很复杂,不同浏览器有不同解释,position 变一下解释又不同了,所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。具体算法请参见 offsetParent 算法

以上属性在 FireFox 中也有效。

另外:我们这里所说的是指 HTML 控件的属性值,并不是 document.body,document.body 的值在不同浏览器中有不同解释(实际上大多数环境是由于对 document.body 解释不同造成的,并不是由于对 offset 解释不同造成的),点击这里查看不同点。

目录
相关文章
|
JavaScript 前端开发
height、clientHeight、scrollHeight、offsetHeight区别
height、clientHeight、scrollHeight、offsetHeight区别
height、clientHeight、scrollHeight、offsetHeight区别
|
JavaScript IDE 开发工具
JS 中 offsetHeight/scrollHeight/clientHeight 的区别
client* clientWidth/clientHeight 返回的是元素的内部宽度,它的值只包含 content + padding,如果有滚动条,不包含滚动条 clientTop 返回的是上边
|
前端开发 JavaScript API
JavaScript 基于offsetHeight和clientHeight判断是否出现滚动条
JavaScript 基于offsetHeight和clientHeight判断是否出现滚动条
109 0
scrollTop详测
scrollTop详测
132 0
|
前端开发
你知道offsetHeight、scrollHeight、clientHeight的区别吗?
前言 offsetHeight、scrollHeight、clientHeight这三个属性我们经常在开发中遇到,如果小伙伴们没有经常使用的话,很容易把这些属性搞混,比如说什么窗口高度、元素高度、内容高度等等。当然,现在的前端框架很多时候帮我们封装了这些属性,但是我们也不能太过依赖框架,底层的原理我们还是需要了解的,今天就来理一理这三个属性分别代表什么?
206 0
你知道offsetHeight、scrollHeight、clientHeight的区别吗?
clientWidth与clientHeight,offsetWidth与offsetHeight
clientWidth与clientHeight,offsetWidth与offsetHeight
148 0
clientWidth与clientHeight,offsetWidth与offsetHeight
|
JavaScript 前端开发
你记住JS中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX吗?
你记住JS中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX吗?
|
容器 数据采集 算法
|
API 编解码
clientHeight、offsetHeight、scrollHeight详解
  网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth   (包括边线的宽); 网页可见区域高: document.
1486 0