博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
(DOM) HTMLElement 中的 offset- 属性
阅读量:6850 次
发布时间:2019-06-26

本文共 1028 字,大约阅读时间需要 3 分钟。

一、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描述的是边界框的维度。

Short span. Long span that wraps withing this div.

图片描述

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

转载地址:http://jdgul.baihongyu.com/

你可能感兴趣的文章