javascript中offsetTop、offsetLeft、offsetWidth、offsetHeight以及scrollTop,scrollLeft详解

最新推荐文章于 2023-07-01 14:38:19 发布

美丽的小黄人

最新推荐文章于 2023-07-01 14:38:19 发布

阅读量476

点赞数

分类专栏： javascript

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

javascript中offsetTop、offsetLeft、offsetWidth、offsetHeight以及scrollTop,scrollLeft详解

①offsetWidth：元素在水平方向上占据的大小，无单位

     offsetWidth = border  + 元素内容宽度 + padding

②offsetHeight：元素在垂直方向上占据的大小，无单位

    offsetHeight = border  + 元素内容高度 + padding

注：1. 如果存在垂直滚动条，offsetWidth也包括垂直滚动条的宽度；

    2. 如果存在水平滚动条，offsetHeight也包括水平滚动条的高度

<div id="test" style="width:100px; height:100px; padding:10px; margin:10px; border:1px solid black; overflow: scroll;"></div>    
<script>
//IE8-浏览器将垂直滚动条的宽度计算在width宽度和height高度中，width和height的值仍然是100px；
//而其他浏览器则把垂直滚动条的宽度从width宽度中移出，把水平滚动条的高度从height高度中移出，则滚动条宽度为17px，width宽度和height高度为剩下的83px

if(window.getComputedStyle){
    console.log(getComputedStyle(test).width,getComputedStyle(test).height)//83px
}else{
    console.log(test.currentStyle.width,test.currentStyle.height);//100px
}
//122=1+10+100+10+1
console.log(test.offsetWidth,test.offsetHeight);
</script>

③offsetTop: 表示元素的上外边框至offsetParent元素的上内边框之间的像素距离，带正负号

④offsetLeft：表示元素的左外边框至offsetParent元素的左内边框之间的像素距离，带正负号

的小bug

⑤scrollTop,scrollLeft：这两个属性是相对于滚动条,垂直位置，当滚动条不存在的时候，obj.scrollLeft 和obj.scrollTop的值为0，滚动条存在的时候，不同位置值是不同的。

JavaScript中offsetWidth的bug及解决方法
https://www.jb51.net/article/113917.htm