（DOM） HTMLElement 中的 offset- 属性

BWrong 发布于2019-08-20 11:37 / 920人阅读

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

一、offsetParent

parentObj = element.offsetParent;

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

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

二、offsetLeft与offsetTop

leftPos = element.offsetLeft;
topPos = element.offsetTop;

HTMLElement.offsetLeft是一个只读属性，返回当前元素左上角相对于HTMLElement.offsetParent节点的左边界偏移的像素值。HTMLElement.offsetTop同理。
对于可被截断到下一行的行内元素（如span），offsetTop和 offsetLeft描述的是第一个边界框的位置。

三、offsetWidth与offsetHeight

offsetWidth = element.offsetWidht;
offsetHeight = element.offsetHeight;

HTMLElement.offsetWidth是一个只读属性，返回一个元素的布局宽度。一个典型的offsetWidth是测量元素的边框(borders)、水平线上的内边距(padding)、竖直方向滚动条(scroolbar)（如果存在的话）、以及CSS设置的宽度(width)的值。HTMLElement.offsetHeight同理。
对于可被截断到下一行的行内元素（如span），offsetWidth和 offsetHeight描述的是边界框的维度。

Short span. 
Long span that wraps withing this div.

上图蓝色阴影部分大小为span#long的offsetWidth与offsetHeight。

GPU云服务器云服务器 DOM元素属性 dom自定义属性 php获取dom属性 python中的属性

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

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

antd源码解读（6）- Affix

摘要：这个组件是一个图钉组件，使用的布局，让组件固定在窗口的某一个位置上，并且可以在到达指定位置的时候才去固定。 Affix 这个组件是一个图钉组件，使用的fixed布局，让组件固定在窗口的某一个位置上，并且可以在到达指定位置的时候才去固定。 AffixProps 还是老样子，看一个组件首先我们先来看看他可以传入什么参数 // Affix export interface Affix...

coordinate35 2019-08-21 17:09 评论0 收藏0
《JavaScript 闯关记》之 DOM（下）

摘要：节点具有以下特征的值为的值为元素的标签名的值为可能是或其子节点可能是或。添加的这些属性分别对应于每个元素中都存在的下列标准特性。，有关元素的附加说明信息，一般通过工具提示条显示出来。 Element 类型除了 Document 类型之外，Element 类型就要算是 Web 编程中最常用的类型了。Element 类型用于表现 XML 或 HTML 元素，提供了对元素标签名、子节点及特...

mudiyouyou 2019-08-20 12:26 评论0 收藏0
如何检测css特性

摘要：如何检测特性如果我们要检测一个属性是否支持支持属性不支持属性如果我们要检测该属性是否支持某值支持该属性值浏览器不支持该属性值如何动态赋值一个效果，并支持所有主流浏览器资料揭秘如何检测css特性如果我们要检测一个css属性是否支持 var dom = document.createElement(p); if (textShadow in dom.style) { alert...

jsliang 2019-08-20 14:13 评论0 收藏0
如何检测css特性

摘要：如何检测特性如果我们要检测一个属性是否支持支持属性不支持属性如果我们要检测该属性是否支持某值支持该属性值浏览器不支持该属性值如何动态赋值一个效果，并支持所有主流浏览器资料揭秘如何检测css特性如果我们要检测一个css属性是否支持 var dom = document.createElement(p); if (textShadow in dom.style) { alert...

izhuhaodev 2019-08-30 15:52 评论0 收藏0
JavaScript高级-unit10 DOM

摘要：在浏览器中，对象是继承自类型的一个实例，表示整个页面。一致性检测属性提供相应信息和功能的对象，与浏览器对的实现直接对应。在中，标签名始终都以全部大写表示而在有时包括，标签名始终与源代码中的保持一致。设置的特性名统一转为小写。简介 DOM描述了一个层次化的节点树，允许开发人员添加、移除和修改页面。节点根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： ...

kohoh_ 2019-08-23 10:42 评论0 收藏0