`
robinqu
  • 浏览: 90279 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

offsetParent, offsetTop, offsetLeft

阅读更多
DOM Level 2 HTML: Node > Element > HTMLElement
这是一些DOM 2级属性,这些属性在Javascript Definitive Guide里面这样描述:

The properties supported by all HTML tags are listed here. Other properties, specific to certain kinds of HTML tags, are listed in the long table in the following Description section. HTMLElement objects inherit a number of useful standard properties from Node and Element, and also implement several nonstandard properties described here

也就是说HTMLElement的属性有的是继承的,有的是对于某些Tag自定的,还有些是非标准的。

在看Learning jQuery这本书的,第九章时计算了几个数值,这些数值相关属性:

int offsetLeft, offsetTop

The X and Y coordinates of the upper-left corner of the CSS border of the element relative to the offsetParent container element. These are nonstandard but well-supported properties.

相对于offsetParent元素的XY坐标值

Element offsetParent

Specifies the container element that defines the coordinate system in which offsetLeft and offsetTop are measured. For most elements, offsetParent is the Document object that contains them. However, if an element has a dynamically positioned container, the dynamically positioned element is the offsetParent. In some browsers, table cells are positioned relative to the row in which they are contained, rather than relative to the containing document. See Chapter 16 for an example that uses this property portably. This is a nonstandard but well-supported property.

offestLeft、offsetTop这两个数值的参照物。通常是Elment的容器,例如document。如果它有是重新定位过的父元素,该属性值就是其父元素。对于Table,该值根据浏览器不同而不同。


Javascript Definitive Guide在Ch16里面还列举了一个例子:

the offsetLeft and offsetTop properties are not usually sufficient by themselves. These properties specify the X and Y coordinates of an element relative to some other element. That other element is the value of the offsetParent property. For positioned elements, the offsetParent is typically the <body> tag or the <html> tag (which has an offsetParent of null) or a positioned ancestor of the positioned element. For nonpositioned elements, different browsers handle the offsetParent differently. Table rows are positioned relative to the containing table in IE, for example. In general, therefore, the portable way to determine the position of an element is to loop through the offsetParent references, accumulating offsets.

对于有”显示位置“的元素,offsetParent一般是<body>或<html>,<html>的offsetParent是null;或者是一个重新定位过的父元素。如果要取得元素在整个页面中的坐标,只有通过循环遍历,加和该元素上层所有元素的offset值。

// Get the X coordinate of the element e.
function getX(e) {
    var x = 0;                // Start with 0
    while(e) {                // Start at element e
        x += e.offsetLeft;    // Add in the offset
        e = e.offsetParent;   // And move up to the offsetParent
    }
    return x;                 // Return the total offsetLeft
}


getY(e)写法类似,但是这个函数由一个bug,那就是当元素的overflow有滚动条的时候,计算Y值必须考虑滚动条滚过的高度。一个修正版的getY(e):
function getY(element) {
    var y = 0;
    for(var e = element; e; e = e.offsetParent) // Iterate the offsetParents
        y += e.offsetTop;                       // Add up offsetTop values

    // Now loop up through the ancestors of the element, looking for
    // any that have scrollTop set. Subtract these scrolling values from
    // the total offset. However, we must be sure to stop the loop before
    // we reach document.body, or we'll take document scrolling into account
    // and end up converting our offset to window coordinates.
    for(e = element.parentNode; e && e != document.body; e = e.parentNode)
        if (e.scrollTop) y -= e.scrollTop;  // subtract scrollbar values

    // This is the Y coordinate with document-internal scrolling accounted for.
    return y;
}

分享到:
评论

相关推荐

    获取offsetTop和offsetLeft值的js代码(兼容)

    offsetTop属性返回当前元素相对于其offsetParent元素顶部的距离,而offsetLeft属性则返回当前元素相对于其offsetParent元素左侧的距离。这两个属性在处理页面布局,尤其是进行DOM元素位置的计算时非常有用。 然而,...

    简单谈谈offsetleft、offsetTop和offsetParent

    ele.offsetLeft和ele.offsetTop取值问题,分多种情况: 如果ele是body的直接子元素,返回值则是ele距离body左侧或顶部的距离 如果ele不是body的直接子元素,在父元素进行定位(relative,absolute)的情况下,各...

    Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性 在Javascript拖拽系列文章中,offsetLeft、offsetTop、offsetWidth、offsetHeight四个属性都是非常重要的,它们都是关于位置定位...

    offsetparent计算

    - 常用于计算元素的位置信息,如通过 `offsetTop` 和 `offsetLeft` 获取元素相对于 `offsetParent` 的偏移量。 - 在处理复杂的布局时,了解 `offsetParent` 的行为可以帮助更好地控制元素的位置。 #### 情况一:...

    详解 javascript中offsetleft属性的用法

    与offsetLeft对应的是offsetTop属性,offsetTop用于获取元素距离最近的已定位父元素上边缘的距离。这两个属性通常一起使用,以获取元素相对于其父元素的确切位置。 5. offsetWidth和offsetHeight的作用: 除了...

    对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解

    这个函数通过递归遍历元素的`offsetParent`,累加每个元素的`offsetLeft`和`offsetTop`,最终得到元素相对于文档左上角的绝对位置。 ### 关于`clientHeight`, `offsetHeight`, `scrollHeight`的区别 这三个属性都...

    JavaScript CSS修改学习第一章 查找位置

    这段代码会向上查找offsetParent,然后添加offsetTop和offsetLeft。最终无论offsetParent在哪,他都会给出你元素在屏幕上的真正坐标。 解释 这段代码非常简单。先传入要计算的元素,然后设置变量curleft和curtop为0...

    js获得对象的x,y位置函数

    `offsetLeft`和`offsetTop`是HTML元素的非标准但广泛支持的属性,用于获取元素相对于其offsetParent元素的左偏移和顶偏移。这里的`offsetParent`通常是指最近的带有定位(position)属性(除了static)的祖先元素。...

    javascript 精确获取页面元素的位置

    现在网上最流行方法是John Resig在《Pro JavaScript techniques》提出的offset大法,累加元素offsetParent的offsetLeft和offsetTop一直到DOM的顶层。

    浅析offsetLeft,Left,clientLeft之间的区别

    `offsetTop`类似,表示元素相对于offsetParent上边界的距离。`offsetWidth`和`offsetHeight`则分别提供元素的总宽度和高度,包括内边距,但不包括外边距和滚动条。 其次,`left`属性是CSS中定位属性的一部分,用于...

    获得对象的x,y位置

    2. **遍历`offsetParent`**:通过`while`循环递归遍历元素的所有`offsetParent`,累加每个父元素的`offsetLeft`或`offsetTop`值。 3. **处理特殊情况**:如果元素本身定义了`x`或`y`坐标,则直接累加到当前位置。 4....

    用Javascript 获取页面元素的位置的代码

    除了 offsetTop 和 offsetLeft 外,我们还可以使用 offsetParent 属性。offsetParent 提供了相对于最近的具有定位属性(position: absolute, relative, fixed, 或 sticky)的父元素的位置。这对于元素位于有定位父...

    javascript获取对象的绝对坐标

    - 如果 `obj` 的 `offsetParent` 存在,则进入循环,累加 `obj.offsetLeft` 和 `obj.offsetTop` 直到 `obj.offsetParent` 不存在为止。 - 如果 `obj` 没有 `offsetParent` 但是存在 `x` 和 `y` 属性,则直接累加 `...

    获取标签离页面边框距离js

    这可以通过遍历该元素及其所有父元素的`offsetLeft`和`offsetTop`属性来实现。这些属性表示元素相对于其偏移父元素的左边缘和顶边缘的距离。因此,为了计算一个元素相对于页面的位置,我们需要累加所有父级元素的...

    javascript获得对象的坐标

    1. **`offsetTop` 和 `offsetLeft`**:这两个属性可以获取元素相对于其最近的已定位祖先元素(position不为static)的偏移量。 2. **`clientTop` 和 `clientLeft`**:用于获取元素本身的边框宽度。 3. **`...

    js获取元素的偏移量offset简单方法(必看)

    本文详细解释了如何通过JavaScript获取元素的偏移量,包括对`offsetParent`、`offsetTop` 和 `offsetLeft` 属性的介绍,以及如何利用这些属性来计算元素的位置。通过实例代码,加深了对这些属性如何工作的理解,并...

Global site tag (gtag.js) - Google Analytics