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

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

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

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

一、第一個(gè)小例子

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

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

二、第二個(gè)小例子（給box1添加相對(duì)定位）

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

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

三、第三個(gè)小例子（給box1，box2添加相對(duì)定位）

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

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

四、解析

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

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

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

其實(shí)也不難。js不但提供了offsetLeft、offsetTop方法，還提供了offsetParent（獲取上一級(jí)定位元素對(duì)象）的方法。所以現(xiàn)在我們只需封裝一個(gè)函數(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;  //獲取上一級(jí)定位元素對(duì)象
		
    while(positionParent != null){
	realNum += positionParent[offsetDir];
	positionParent = positionParent.offsetParent;
    }
    return realNum;
}

運(yùn)用程序中

<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;  //獲取上一級(jí)定位元素對(duì)象
		
	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>

運(yùn)行結(jié)果為：

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

相關(guān)文章

最新評(píng)論