欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

全面解析JavaScript中offsetLeft、offsetTop的用法

 更新時間：2023年04月23日 15:37:41   作者：汪小穆  
本文主要介紹了全面解析JavaScript中offsetLeft、offsetTop的用法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言：偏移量，很多動畫效果的實現(xiàn)都是通過去改變偏移量的改變來實現(xiàn)的，但是你真的完全了解offsetLeft，offsetTop嗎？

一、第一個小例子

<body>
<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>
<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>

①第一個例子中，三個div的上一級的定位元素都是body，body是最外層的定位元素，三個div獲取到的offsetLeft值跟offsetTop值都是相對于body的偏移量。

二、第二個小例子（給box1添加相對定位）

<body>
<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; }
    .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>

②第二個例子中，box1加上了相對定位，這時候box2，box3的上一級定位元素不再是body了，這時他們獲取到的offsetLeft值跟offsetTop值都是相對于box1的偏移量。而box1的上一級定位元素還是body，所以他的偏移量還是相對于body的。

三、第三個小例子（給box1，box2添加相對定位）

<body>
<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>
<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>

③第三個例子中，box1跟box2都加上了相對定位，這時候，box3的上一級定位元素變成是box2，box2的上一級定位元素是box1，box1的上一級定位元素還是body。所以這時候就出現(xiàn)了。三個div的偏移量都為100；

四、解析

通過上面的三個例子不難看出，offsetLeft值跟offsetTop值的獲取跟父級元素沒關(guān)系，而是跟其上一級的定位元素(除position:static;外的所有定位如fixed,relative,absolute)有關(guān)系。

五、擴展(在第三個例子中，假如我想獲取到box3到瀏覽器窗口的偏移量，該怎么去獲取呢？)

思路很簡單，就是把元素本身的偏移量跟所有上級定位元素的偏移量都加起來就可以了，問題又來了，假如我們不知道他有幾個上級定位元素呢？

其實也不難。js不但提供了offsetLeft、offsetTop方法，還提供了offsetParent（獲取上一級定位元素對象）的方法。所以現(xiàn)在我們只需封裝一個函數(shù)就可以了。

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;
}

運用程序中

<body>
<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>
<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>

運行結(jié)果為：

 到此這篇關(guān)于全面解析JavaScript中offsetLeft、offsetTop的用法的文章就介紹到這了,更多相關(guān)JavaScript offsetLeft offsetTop內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論