弄清offset（版本1）

一、关于offset，我们要弄明白什么

在这里我们可以看到，关于offset共有5个东西需要弄清楚：

　　1、offsetParent

　　2、offsetTop

　　3、offsetLeft

　　4、offsetWidth

　　5、offsetHeight

　　我们根据难易程度把以上5点分为三类来讲解。

二、offsetWidth与offsetHeight

<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body {border:20px solid #CCC;margin:10px;padding:40px;background:#EEE;}
        #test {width:400px;height:200px;padding:20px;background:#F60;border:5px solid #888;}
    </style>
    <title>Title</title>
</head>
<body>
    <div id="test"></div>
    <script>
        var test = document.getElementById("test");
        test.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" +
                "<p>offsetWidth:" + test.offsetWidth + "</p>" +
                "<p>offsetHeight:"+test.offsetHeight+"</p>"+
                "<p>offsetLeft:"+test.offsetLeft+"</p>"+
                "<p>offsetTop:"+test.offsetTop+"</p>";
    </script>
</body>

　                           　

　　元素的可视宽度，这个宽度包括元素的边框(border)，水平padding，垂直滚动条宽度，元素本身宽度等。

　　　　offsetHeight跟offsetWidth类似，只是方向改为垂直方向上的。

　　只是我们的示例中没有水平和垂直滚动条。另外经过测试可以发现，即使元素加上水平或垂直滚动条，offsetWidth跟offsetHeight的值是不会更改的，因为浏览器渲染时把滚动条的宽度（或高度）算在了元素本身的宽度（或高度）中了。

　　通过代码及图中数值，我们不难看出:

　　offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)

　　offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)

三、offsetParent

　　offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。

　　总的来说两条规则：

　　1、如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。

　　2、如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

　　上面的示例就是第1条说的情况，我们来验证一下：

　　我们把JS改为(添加了一行代码：红色部分)：

var test = document.getElementById("test");
test.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" +
    "<p>offsetParent:" + test.offsetParent.tagName + "</p>" +
    "<p>offsetWidth:" + test.offsetWidth + "</p>" +
    "<p>offsetHeight:"+test.offsetHeight+"</p>"+
    "<p>offsetLeft:"+test.offsetLeft+"</p>"+
    "<p>offsetTop:"+test.offsetTop+"</p>";

                             

　　从那个上面的图片可以看出offsetParent的值是body；（当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。）

四、offsetLeft与offsetTop

　　未完待续

 

posted @ 2016-05-27 16:47  zzjeny  阅读(326)  评论(0)    收藏  举报