js的offsetWidth,clientWidth

js元素的offsetWidth与clientWidth很相似，因此放在一起记录。

clientWidth与offsetWidth

 

clientWidth=元素内容区域宽度+水平内边距padding.

offsetWidth=元素的内容区域宽度+水平内边距padding+边框的宽度。

因此，可以认为：

offsetWidth=clientWidth+边框宽度。

 

通过实例验证下：

 

<div style="width:500px;height:300px;background-color:#00f;position:relative;" id="div3">
        sdsdsd
        <div id="div2" style="width:300px;height:300px;border:10px solid #ccc;background-color:limegreen;padding:10px;">sdsd </div>
 </div>

var div2 = document.getElementById("div2");
    var clientWidth = div2.clientWidth;
    var clientHeight = div2.clientHeight;
    console.log("clientHeight:"+clientHeight+"  clientWidth:"+clientWidth);

    var offsetWidth = div2.offsetWidth;
    var offsetHeight = div2.offsetHeight;
    console.log("offsetHeight:"+offsetHeight+"  offsetWidth:"+offsetWidth);

 FF下的console:

 

因,div2的宽度时300px， 且padding为10px，根据以上描述，则clientWidth等于内容区域宽度300+内边距10*2（一个是paddingLeft，一个是paddingRight）=320px;

其他计算类似。