Javascript CSS编程（一）元素定位、透明、内联样式

robinqu

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

最近访客更多访客>>

hypocrite.T

kathy919

ahyouyou

ztcwh

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

编程 CSS JavaScript UP IE

Querying Element Position and Size
查询元素坐标和大小

引用

the offsetLeft and offsetTop properties of an element return the X and Y coordinates of the element.

the offsetWidth and offsetHeight properties return the width and height. These properties are read-only and return pixel values as numbers (not as CSS strings with "px" units appended).

They mirror the CSS left, top, width, and height attributes

offesetLeft and offsetTop specify the X and the Y coordinates of an element relative to offsetParent element.

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.

In general, therefore, the portable way to determine the position of an element is to loop through the offsetParent references, accumulating offsets.

对于已定为的元素，offsetLeft\offsetTop返回元素的X、Y坐标。

offsetWidth、offsetHeight返回宽和高。返回数值只有数值而没有单位。

这些属性分别对性CSS的left、top、width、height属性。

offsetTop、offsetLeft的是相对于offsetParent的。
对于已经定位过的元素，offsetParent通常是body标签或html标签（通常这两个标签的offsetParent值是null）；对于没有定位过的，offsetParent就是一个已经定位过的祖先。

对于未定位

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

下面这个方法就考虑了滚动条的存在，这个是比较健壮的版本：

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

Translucency
透明

每个浏览器实现透明度方法不一样，所以CSS会很麻烦：

opacity: .75;               /* standard CSS3 style for transparency */
-moz-opacity: .75;          /* transparency for older Mozillas */
filter: alpha(opacity=75);  /* transparency for IE; note no decimal point */

Scripting Inline Styles
内联样式编程

引用

It is important to understand that the CSS2Properties object you obtain with the style property of an element specifies only the inline styles of the element. You cannot use the properties of the CSS2Properties object to obtain information about the stylesheet styles that apply to the element. By setting properties on this object, you are defining inline styles that effectively override stylesheet styles.

你通过元素的stlye属性得到的CSS2Properties对象只包含内联样式，你无法通过这个属性访问到整个样式表。但是通过设定这个属性，你是可以强制更改这个元素的属性的，因为内联样式的优先级是最高的。

在编写内联样式的时候，要注意驼背命名法，以及一些特殊的CSS名称的转换，比如：
float - > cssFloat

分享到：

Javascript 事件编程（一） | Javascript CSS编程（二）Computed Style ...

2009-09-03 14:29
浏览 2082
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论