首頁 > web前端 > js教程 > js offsetTop和offsetLeft实例分析

js offsetTop和offsetLeft实例分析

WBOY
發布: 2016-06-01 09:55:00
原創
1560 人瀏覽過

offsetTop:以 CSS 像素为单位返回元素上边框距其 offsetParent 上边框的距离。 
offsetLeft:以 CSS 像素为单位返回元素相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
 
这里最主要的是找准 offsetParent。
其实很简单,比如我们要计算A元素的 offsetTop, 那么先要找到A元素的offsetParent,A元素的offsetParent应该是离A元素最近的父元素,并且父元素设置了position:relative或absolute属性,如果没有匹配到任何父元素,那么应该以窗口为基准计算元素的offsetTop。

下面用实例来说明:
 

<code>;

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">


<div id="main">
    <div id="first" style="width:300px; height:200px; border:1px solid red">300X200的盒子</div>
    <div id="second">
        <div id="third">offsetTop详解</div>
    </div>
</div>
<script type="text/javascript">
    var oTop=document.getElementById("third").offsetTop;//此时获取id为third元素的offsetTop,是以窗口基准,即得到的值是该元素距离窗口的垂直距离(202px, 算上了id为first元素的border)。
    var oLeft=document.getElementById("third").offsetLeft; //以窗口基准,值为10px(body设置了10px的左内边距)。
    //下面我们改变一下id为second元素的css,加上"style='position:relative;padding-left:100px'",然后重新获取id为third元素的offsetTop,此时值为0;因为现在不是以窗口基准,而是以id为third元素为基准计算。同理offsetLeft的值是100px;
</script>

 </code>
登入後複製

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板