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

最新推荐文章于 2022-05-08 23:22:37 发布

QuLong

最新推荐文章于 2022-05-08 23:22:37 发布

阅读量157

点赞数

分类专栏： javascript 文章标签：编程 CSS JavaScript UP IE ViewUI

本文链接：https://blog.csdn.net/QuLong/article/details/83456354

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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

[quote]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.[/quote]

对于已定为的元素，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
内联样式编程

[quote]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.[/quote]

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

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

QuLong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript CSS编程（一）元素定位、透明、内联样式

Querying Element Position and Size查询元素坐标和大小[quote]the offsetLeft and offsetTop properties of an element return the X and Y coordinates of the element.the offsetWidth and offsetHeight propert...
复制链接

扫一扫