1. 程式人生 > >獲取元素的偏移量offset

獲取元素的偏移量offset

parentNode

有盒子的佈局如下


檢視每一層盒子的parentNode:父親節點,HTML結構層級關係中的上一級元素

center.parentNode   //inner

inner.parentNode    //outer

outer.parentNode   //body


js是區分大小寫的


插曲一點小知識:

null和undefined都代表沒有,但是null是屬性存在但是值不存在,undefined是指這個屬性都不存在

例如上面的例子:

document.parentNode(瀏覽器天生就自帶的一個屬性:父親節點的屬性)-->  null:因為一個頁面中的document已經是最頂級的元素了,它沒有父親

document.parentnode  -->  undefined 因為沒有parentnode這個屬性

offsetParent

父級參照物,在一個平面中,最外層的元素是裡面所有元素的父級參照物(和HTML層級結構沒有必然的聯絡)

一般來說一個頁面中所有元素的父級參照都是body


offsetLeft/offsetTop

如果要想改變父級參照物需要通過position定位來進行改變:absolute,relative,fixed任意一個值都可以把父級參照物進行修改


求出一個頁面中任意一個元素(不管他的父級元素參照物是誰),獲取其距離body的左偏移

①首先加上自己本身的左偏移

②獲取自己的父級參照物par,把par的左邊框和左偏移都加上

③基於當前的par在向上找父級元素參照物,找到後依然是累加其邊框和其左偏移

④直到父級元素參照物為null,已經到body了就結束了

<script type="text/javascript">
    var center = document.getElementById("center"),
        inner = document.getElementById("inner"),
        outer = document.getElementById("outer");
    inner.style.position = "absolute";
    outer.style.position = "relative";
//    offset:等同於jQuery中的offset方法,實現獲取頁面中任意一個元素,
    // 距離body的偏移(包含左偏移和上偏移),不管當前的元素的父級參照物是誰
//    獲取的結果是一個物件{left:距離body的左偏移,top:距離body的上偏移}
//    在標準的IE8瀏覽器中,我們使用的是offsetLeft/offsetTop其實是把父級參照物的邊框已經算在內了
    function offset(curEle) {
        var totalLeft = null,
            totalTop = null,
            par = curEle.offsetParent;
//        首先把自己本身的進行累加
        totalLeft += curEle.offsetLeft;
        totalTop += curEle.offsetTop;
//        只要沒有找到body,我們就把父級參照物的邊框和偏移量也進行累加
        while (par){
//            不是標準的IE8瀏覽器,我們才進行累加邊框
            if(navigator.userAgent.indexOf("MSIE 8.0")===-1){
//                累加父級參照物的邊框
                totalLeft += par.clientLeft;
                totalTop += par.clientTop;
            }
//            累加父級參照物本身的偏移
            totalLeft += par.offsetLeft;
            totalTop += par.offsetTop;

            par = par.offsetParent;
        }
        return {left:totalLeft,top:totalTop}
    }
    console.log(offset(center).left);
</script>