offsetLeft 解析

時間 2019-12-09

標籤 offsetleft 解析简体版

原文原文鏈接

前言:先看下w3c與之相關的介紹:css

element.offsetHeight	返回元素的高度。
element.offsetWidth	返回元素的寬度。
element.offsetLeft	返回元素的水平偏移位置。
element.offsetParent	返回元素的偏移容器。
element.offsetTop	返回元素的垂直偏移位置。

1,簡單來講就是偏移量,但它的參考對象究竟是誰,咱們慢慢來看.jquery

<style> body { margin:0;  } .box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; } .box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; } .box3 { width:100px; height:100px; margin:100px; background:#999;}
</style>

<body>

<div class="box1"> 
 <div class="box2"> 
 <div class="box3">
 </div> 
 </div> 
</div>

 <script>
 var oBox1 = document.querySelector('.box1'); 
 var oBox2 = document.querySelector('.box2'); 
 var oBox3 = document.querySelector('.box3'); 
 console.log('box1: '+ oBox1.offsetLeft +','+ oBox1.offsetTop); 
 console.log('box2: '+ oBox2.offsetLeft +','+ oBox2.offsetTop);
 console.log('box3: '+ oBox3.offsetLeft +','+ oBox3.offsetTop); 
 </script> 
</body>

效果以下:瀏覽器

這個demo中能夠看出在默認狀況下每一個box的偏移值都是以瀏覽器爲參考對象的.函數

2.若是咱們給父級加上定位呢?(box1添加相對定位)spa

<body>
<style> body { margin:0;  } .box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; position:relative;} //box1設置相對定位 .box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; } .box3 { width:100px; height:100px; margin:100px; background:#999;}
</style>
<div class="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>
<script>
    var oBox1 = document.querySelector('.box1'); var oBox2 = document.querySelector('.box2'); var oBox3 = document.querySelector('.box3'); console.log('box1: '+ oBox1.offsetLeft +','+ oBox1.offsetTop); console.log('box2: '+ oBox2.offsetLeft +','+ oBox2.offsetTop); console.log('box3: '+ oBox3.offsetLeft +','+ oBox3.offsetTop); </script>

</body>

效果:指針

因此給父級添加定位以後,offset的偏移值就會變成相對於父級的偏移值.(除了position:static;外的全部定位,如fixed,relative,absolute都會使偏移值的參考對象變爲父級))code

3.在咱們給父級添加定位以後,還想獲取元素相對於瀏覽器窗口的偏移值怎麼辦?對象

　　思路很簡單，就是把元素自己的偏移量跟全部上級定位元素的偏移量都加起來就能夠了，問題又來了，假如咱們不知道他有幾個上級定位元素呢？blog

　　這就須要封裝一個函數(用到了offsetParent :獲取上一級定位元素對象）:事件

function offset(obj,direction){        //傳入對象 和 方向
    //將top,left首字母大寫,並拼接成offsetTop,offsetLeft
    var offsetDir = 'offset'+ direction[0].toUpperCase()+direction.substring(1); var realNum = obj[offsetDir]; var positionParent = obj.offsetParent;  //獲取上一級定位元素對象
        
    while(positionParent != null){ realNum += positionParent[offsetDir]; positionParent = positionParent.offsetParent; } return realNum; }

實際運用是這樣的:

<style> body { margin:0;  } .box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; position:relative; } .box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; position:relative; } .box3 { width:100px; height:100px; margin:100px; background:#999;}
</style>

<body>
<div class="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>

<script>
    var oBox1 = document.querySelector('.box1'); var oBox2 = document.querySelector('.box2'); var oBox3 = document.querySelector('.box3'); function offset(obj,direction){ //將top,left首字母大寫,並拼接成offsetTop,offsetLeft
        var offsetDir = 'offset'+ direction[0].toUpperCase()+direction.substring(1); var realNum = obj[offsetDir]; var positionParent = obj.offsetParent; //獲取上一級定位元素對象
        
        while(positionParent != null){ realNum += positionParent[offsetDir]; positionParent = positionParent.offsetParent; } return realNum; } console.log('box1: '+ offset(oBox1,'left') +','+ offset(oBox1,'top')); console.log('box2: '+ offset(oBox2,'left') +','+ offset(oBox2,'top')); console.log('box3: '+ offset(oBox3,'left') +','+ offset(oBox3,'top')); </script>
</body>

運用到移動端拖拽事件(jquery):

 // 拖拽事件
  var x1; var x2; var x_c;　　//指針劃過的距離 var xoffsetLeft;
 $('#ulListMoble').on('touchstart', function (e) { var touch = e.originalEvent.targetTouches[0]; x1 = touch.pageX; }); $('#ulListMoble').on('touchmove', function (e) { var touch = e.originalEvent.targetTouches[0]; xoffsetLeft = $('#ulListMoble')[0].offsetLeft; x2 = touch.pageX; x_c = x1 - x2; xoffsetLeft -= x_c; // console.log(xoffsetLeft);
    if (xoffsetLeft < 0) { $('#ulListMoble').css({ "left": xoffsetLeft + "px" }) } x1 = x2; }); })

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。