offsetLeft 解析
生活随笔
收集整理的這篇文章主要介紹了
offsetLeft 解析
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言:先看下w3c與之相關的介紹:
| element.offsetHeight | 返回元素的高度。 |
| element.offsetWidth | 返回元素的寬度。 |
| element.offsetLeft | 返回元素的水平偏移位置。 |
| element.offsetParent | 返回元素的偏移容器。 |
| element.offsetTop | 返回元素的垂直偏移位置。 |
1,簡單來說就是偏移量,但它的參考對象到底是誰,我們慢慢來看.
<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添加相對定位)
<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都會使偏移值的參考對象變為父級))
?
?3.在我們給父級添加定位之后,還想獲取元素相對于瀏覽器窗口的偏移值怎么辦?
思路很簡單，就是把元素本身的偏移量跟所有上級定位元素的偏移量都加起來就可以了，問題又來了，假如我們不知道他有幾個上級定位元素呢？
這就需要封裝一個函數(用到了offsetParent :獲取上一級定位元素對象）:
function offset(obj,direction){ //傳入對象 和 方向//將top,left首字母大寫,并拼接成offsetTop,offsetLeftvar 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,offsetLeftvar 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;});})
?
總結
以上是生活随笔為你收集整理的offsetLeft 解析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 高送转对于股票的影响
- 下一篇： 移动端布局那些事