offsetTop offsetLeft offsetParent

CoderDock 发布于2019-08-20 12:03 / 522人阅读

摘要：是一个只读属性，返回一个指向最近的，指包含层级上的最近包含该元素的定位元素。很有用，因为和都是相对于其内边距边界的。对块级元素来说，及描述了元素相对于的边界框。这里的也可以用代替，但是在中禁止在严格模式中使用。

offsetParent

HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table 元素对象或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。
详情参见：HTMLElement.offsetParent

offsetLeft offsetTop

以offsetLeft为例，offsetTop差不多。

HTMLElement.offsetLeft 是一个只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。

对块级元素来说，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框。
详情：HTMLElement.offsetLeft

获取元素到网页左侧的距离

由上面可知道offsetLeft是对于offsetParent来说的，所以要获取元素到网页左侧的距离，需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，如此循环直至根元素，就可以得到一个基本准确的值。

var getOffset = {
    left : function (obj) {
        return obj.offsetLeft + (obj.offsetParent ? this.left(obj.offsetParent):0);
    },
    top : function (obj) {
        return obj.offsetTop + (obj.offsetParent ? this.left(obj.offsetParent) : 0);
    }
};

这里的this.left(obj.offsetParent)也可以用arguments.callee(obj.offsetParent)代替，但是在ECMAScript 5 中禁止在严格模式中使用 arguments.callee()。当一个函数必须调用自身的时候，假如它是函数表达式则给它命名，或者使用函数声明，避免使用 arguments.callee()，因为arguments是一个比较庞大的对象，非常耗资源

云服务器 GPU云服务器 offsetParent offsetTop offsetLeft offsetleft兼容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80771.html

offsetWidth/offsetHeight、offsetLeft/offsetTop、offs

摘要：因为一旦我们给父元素设置了会影响文档流。是指当前元素相对于父级参照物的偏移量。在标准浏览器中是指当前元素的左边框的外沿到父级参照物边框的内沿，如上图中的，，所示。盒子上边框的高度。接下来我们依然讨论盒模型中的offset系列：offsetWidth/offsetHeight、offsetLeft/offsetTop、offsetParent showImg(https://segme...

JellyBool 2019-08-23 14:57 评论0 收藏0
（DOM） HTMLElement 中的 offset- 属性

摘要：一是一个只读属性，返回一个指向最近的指包含层级上的最近包含该元素的定位元素。很有用，因为和都是相对于其内边距边界的。对块级元素来说，及描述了元素相对于的边界框。二与是一个只读属性，返回当前元素左上角相对于节点的左边界偏移的像素值。一、offsetParent parentObj = element.offsetParent; HTMLElement.offsetParent是一个只...

BWrong 2019-08-20 11:37 评论0 收藏0
常用元素位置与大小总结

摘要：偏移量元素在垂直方向占据的空间大小内容高度上下上下元素在水平方向占据的空间大小内容宽度左右左右元素外边框距离的上内边框的距离元素外边框距离的左内边框的距离是一个只读属性，返回一个指向最近的，指包含层级上的最近包含该元素的定位元素。偏移量 offsetHeight: 元素在垂直方向占据的空间大小 => 内容高度 + 上下padding + 上下boder offsetWidth: ...

JellyBool 2019-08-19 18:21 评论0 收藏0
浏览器的各种位置值获取

摘要：包括和属性是可以赋值的，并且会立即自动滚动网页到相应位置，因此可以利用它们改变网页元素的相对位置。另外，方法也有类似作用，可以使网页元素出现在浏览器窗口的左上角。网页元素的位置那就是使用方法。就是透过浏览器看内容的这个区域高度。获取网页的大小一张网页的全部面积，就是它的大小，通常是由内容和css样式表决定的。浏览器窗口的大小，是在浏览器中看到的那部分网页面积。又叫做viewport...

lvzishen 2019-08-21 11:53 评论0 收藏0
JS宽高（client、offset、scroll）的介绍

摘要：问题今日头条的一道笔试题，的区别。结果如图更详细的介绍，请点击问题今日头条的一道笔试题，offsetWidth、clientWidth、scrollWidth的区别。分析 JS中document对象的宽高有三种，cilent、offset、scroll client： clientWidth和clientHeight，clientTop和clientLeft clientWidt...

mj 2019-08-20 18:21 评论0 收藏0