js的offsetWidth,clientWidth及offsetParent

浏览数：45 / 时间：2015年06月09日

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

1、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;

其他计算类似。

2、offsetParent

元素的offsetParent并不是元素的父元素，判断元素的offsetParent要根据以下情况：

1）当DOM结构层次中的元素均没有进行css定位（设置position为absolute或relative），则offsetParent为根目录；

2）当元素的父元素没有进行css定位，则offsetParent取最近的已经定位的元素；

3）当元素的父元素进行了css定位，则offsetParent为父元素；

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js的offsetWidth,clientWidth及offsetParent