首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >clientWidth、scrollWidth与offsetWidth的区别详解

clientWidth、scrollWidth与offsetWidth的区别详解

作者头像
tianyawhl
发布2019-04-04 10:39:05
1.9K0
发布2019-04-04 10:39:05
举报
文章被收录于专栏:前端之攻略前端之攻略

clientWidth、scrollWidth与offsetWidth这三种经常会混淆,举例解释这三种宽度

1、没有滚动条的情况

 #boxWrap {
        width: 300px;
        height: 300px;
        background: pink;
        overflow: auto;
    }

    #box1 {
        width: 200px;
        height: 200px;
        background: gray;
        margin: 0 auto;
        padding: 10px;
        border: 5px solid #ccc;
        box-sizing: content-box;
    }
<div id="boxWrap">
    <div id="box1">this is the box </div>
    </div>
<script type="text/javascript">
var clientWidth=document.getElementById("box1").clientWidth;//220     clientWidth=content+padding
var scrollWidth=document.getElementById("box1").scrollWidth;//220     scrollWidth=content+padding
var offsetWidth=document.getElementById("box1").offsetWidth;//230     offsetWidth=content+padding+border
alert(clientWidth + " , " + scrollWidth + " , " + offsetWidth)
</script>

上面没有滚动条的情况下clientWidth:220   scrollWidth:220    offsetWidth:230

2、含有滚动条的情况

(1)对于里面的box(box2)

#boxWrap {
        width: 300px;
        padding:10px;
        border:1px solid #ccc;
        height: 300px;
        background: pink;
        overflow: auto;
        box-sizing: content-box;
    }

   
    #box2 {
        width: 400px;
        height: 400px;
        background: gray;
        margin: 0 auto;
        padding: 10px;
        border: 5px solid #ccc;
        box-sizing: content-box;
    }

<div id="boxWrap">
      <div id="box2">this is another box </div>
</div>
<script type="text/javascript">
var clientWidth2 = document.getElementById("box2").clientWidth; //420     
var scrollWidth2 = document.getElementById("box2").scrollWidth; //420     
var offsetWidth2 = document.getElementById("box2").offsetWidth; //430     
alert(clientWidth2 + " , " + scrollWidth2 + " , " + offsetWidth2) 
</script>

在有滚动条时对于里面的box来说是跟没有滚动条是一样的

(2)对于外面的box(boxWrap)

<script type="text/javascript">
var clientWidth3 = document.getElementById("boxWrap").clientWidth; //303  
var scrollWidth3 = document.getElementById("boxWrap").scrollWidth; //440     
var offsetWidth3 = document.getElementById("boxWrap").offsetWidth; //322     
alert(clientWidth3 + " , " + scrollWidth3 + " , " + offsetWidth3)
</script>

外面的box受到里面box的影响,如果里面的box比较大,会有滚动条,

外面box的clientWidth= content+padding-滚动条的宽度(大概是17px)

外面box的scrollWidth=里面box的总宽度(里面box的content+padding+border)+外面box一边的padding

外面box的offsetWidth=外面box自身的content+padding+border

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018/05/09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档