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({});