JS页面偏移定位父级offsetParent和offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性详解

时间：6年前阅读：5978

偏移量(offset dimension)是javascript中的一个重要的概念。涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性。当然，还有一个偏移参照——定位父级offsetParent。本文将详细介绍该部分内容

页面偏移

　　要知道某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，并加上offsetParent的相应方向的边框，如此循环直到根元素，就可以得到元素到页面的偏移量

　　[注意]在默认情况下，IE8-浏览器下如果使用currentStyle()方法获取<html>和<body>(甚至普通div元素)的边框宽度都是medium，而如果使用clientLeft(或clientTop)获取边框宽度，则是实际的数值

html,body{border: 0;}

body{margin:0;}

function getElementLeft(element){

var actualLeft = element.offsetLeft;

var current = element.offsetParent;

while(current != null){

actualLeft += current.offsetLeft + current.clientLeft;

current = current.offsetParent;

}

return actualLeft + 'px';

}

function getElementTop(element){

var actualTop = element.offsetTop;

var current = element.offsetParent;

while(current != null){

actualTop += current.offsetTop + current.clientTop;

current = current.offsetParent;

}

return actualTop + 'px';

}

</div>

//其他浏览器返回31(10+20+1)，而IE7-浏览器返回21((20和10的较大值)+1)

console.log(getElementTop(test));

//所有浏览器返回31(10+20+1)

console.log(getElementLeft(test));

</script>

注意事项

　　1、所有偏移量属性都是只读的

console.log(test.offsetWidth);//100

//IE8-浏览器会报错，其他浏览器则静默失败

test.offsetWidth = 10;

console.log(test.offsetWidth);//100

</script>

　　2、如果给元素设置了display:none，则它的偏移量属性都为0

console.log(test.offsetWidth);//0

console.log(test.offsetTop);//0

</script>

　　3、每次访问偏移量属性都需要重新计算

console.time("time");

for(var i = 0; i < 100000; i++){

var a = test.offsetWidth;

}

console.timeEnd('time');//65.129ms

</script>

console.time("time");

var a = test.offsetWidth;

for(var i = 0; i < 100000; i++){

var b = a;

}

console.timeEnd('time');//1.428ms

</script>

　　由上面代码对比可知，重复访问偏移量属性需要耗费大量的性能，所以要尽量避免重复访问这些属性。如果需要重复访问，则把它们的值保存在变量中，以提高性能

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

JS页面偏移定位父级offsetParent和offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性详解

网友评论