• javascript获得元素的尺寸和位置一 : offsetTop/Left、offsetWidth/Height、offsetParent


    在学习offset的相关属性前,必须明确指出offsetHeight/Width、offsetTop/offsetLeft等返回的都是只读的并且以数字的形式返回像素值(例如,返回12,而不是'12px')。

    定位父元素:指在CSS中某一元素domElement[position:relative/absolute] 所相对定位的元素。

    1、offsetParent

       对于offsetParent来讲,最重要的是能够知道 domElement.offsetParent 指向的是哪个元素。然而对于这一点不同的浏览器之间有一些微妙的差异。

       a、domElement设置了position:relative/absolute属性:

          domElement.offsetParent指向的是该元素的定位父元素。

          但也有一个bug,见一下代码:

     

    Code

       b、domElement没有设置position:relative/absolute,即static:

          这一点所有的浏览器基本相同,domElement的offsetParent指向的是离domElement最近的拥有position:relative/absolute属性的父级元素。若不存在,则指向 <body>元素。但这种情况也有例外,如果domElement是<td>则 offsetparent 指向<table>

       c、关于offsetParent的实例:

     

    Code

     

    Code

    2、offsetLeft/Top

     

    offsetLeft: 该元素左border的左边缘  到  该元素的offsetParent的左border内边缘的水平距离。

    offsetTop:该元素的上border的上边缘  到  该元素的offsetParent的上border内边缘的垂直距离。

       代码:

     

    Code

     3、offsetWidth/offsetHeight

       给出元素在页面中占据的宽度和高度的总计。注意:把元素的边框和滚动条计算在内。

       offsetWidth =  border-left-width + padding-left + width + padding-right + border-right-width; 

       offsetHeight =  border-top-width + padding-top + height + padding-bottom + border-bottom-width;  

    4、相关应用

    a、获得一个元素的实际宽度和高度,例如:一个自适应高度的段落,往往可以通过获得该元素CSS层叠后的最终高度【见下代码】,但是这种方法在IE中有时返回的是auto,所以使用一个元素的offsetWidth/offsetHeight是比较理想的方法。

     

    function getStyle(elem , type){
        
    var typeface = '';
        
    if(elem.currentStyle)
            typeface 
    = elem.currentStyle[type];
        
    else if(window.getComputedStyle)
            typeface 
    = window.getComputedStyle(elem , null)[type];
        
    return typeface;        
    }

     

       获得一个元素位置的可移植的方法:在窗口中的位置

     

    function getX(elem){
        var x = 0;
        while(elem){
            x = x + elem.offsetLeft;
            elem = elem.offsetParent;
        }
        return x;
    }
    function getY(elem){
        var y = 0;
        while(elem){
            y = y + elem.offsetTop;
            elem = elem.offsetParent;
        }
        return y;
    }

     

  • 相关阅读:
    POJ 1966 Cable TV Network
    POJ 3204 Ikki's Story I
    Codeforces Round #388 (Div. 2)
    BZOJ 后缀自动机四·重复旋律7
    扩展欧几里得 exGCD
    网络流模板 NetworkFlow
    BZOJ 2002: [Hnoi2010]Bounce 弹飞绵羊
    BZOJ 3224: Tyvj 1728 普通平衡树
    BZOJ 1070: [SCOI2007]修车
    BZOJ 4552: [Tjoi2016&Heoi2016]排序
  • 原文地址:https://www.cnblogs.com/rainman/p/1391056.html
Copyright © 2020-2023  润新知