期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

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

偏移量(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 style="padding: 20px;border:1px solid black;position:absolute;">

    <div id="test" style="width:100px; height:100px; margin:10px;"></div>        

</div>        

<script>

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

console.log(getElementTop(test));

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

console.log(getElementLeft(test));

</script>

 

注意事项

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

<div id="test" style="width:100px; height:100px; margin:10px;"></div>        

<script>

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

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

test.offsetWidth = 10;

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

</script>

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

<div id="test" style="width:100px; height:100px; margin:10px;display:none"></div>

<script>

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

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

</script>

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

<div id="test" style="width:100px; height:100px; margin:10px;"></div>        

<script>

console.time("time");

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

    var a = test.offsetWidth;

}

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

</script>

<div id="test" style="width:100px; height:100px; margin:10px;"></div>        

<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,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册