offsetParent, offsetTop, offsetLeft

robinqu

浏览: 90275 次
性别:
来自: 武汉

最近访客更多访客>>

hypocrite.T

kathy919

ahyouyou

ztcwh

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

jQuery JavaScript UP IE CSS

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;
}

分享到：

Other Image Properties | Overflow属性

2009-07-04 15:14
浏览 2362
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论