clientWidth、scrollWidth與offsetWidth的區別詳解

時間 2019-12-11

標籤 clientwidth scrollwidth offsetwidth 區別詳解简体版

原文原文鏈接

clientWidth、scrollWidth與offsetWidth這三種常常會混淆，舉例解釋這三種寬度javascript

一、沒有滾動條的狀況html

#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:230java

二、含有滾動條的狀況this

（1）對於裏面的box（box2）code

#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來講是跟沒有滾動條是同樣的htm

（2）對於外面的box（boxWrap）ip

<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比較大，會有滾動條，get

外面box的clientWidth= content+padding-滾動條的寬度（大概是17px）class

外面box的scrollWidth=裏面box的總寬度（裏面box的content+padding+border）+外面box一邊的paddingcli

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