(DOM) HTMLElement 中的 offset- 属性

kimi013

一、offsetParent

parentObj = element.offsetParent;

HTMLElement.offsetParent是一个只读属性,返回一个指向最近的(指包含层级上的最近)包含该元素的定位元素。如果没有定位的元素,则offsetParent为最近的table元素对象或根元素(标准模式下为htmlquirks模式下为body)。当元素的 style.display设置为none时,offsetParent返回nulloffsetParent很有用,因为offsetTopoffsetLeft都是相对于其内边距边界的。

对块级元素来说,offsetTopoffsetLeftoffsetWidthoffsetHeight描述了元素相对于offsetParent的边界框。

二、offsetLeftoffsetTop

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

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

三、offsetWidthoffsetHeight

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

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

<span id = "short">Short span. </span>
<span id= "long">Long span that wraps withing this div.</span>

图片描述

上图蓝色阴影部分大小为span#longoffsetWidthoffsetHeight

阅读 7.4k

247 声望
10 粉丝
0 条评论
247 声望
10 粉丝
文章目录
宣传栏