首页 > 代码库 > js的offsetWidth,clientWidth及offsetParent

js的offsetWidth,clientWidth及offsetParent

2024-07-30 23:28:32   220人阅读

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


联系
我们