css - 关于JavaScript中元素的大小

问题描述

问 题

刚刚测试元素的offsetWidth和clientWidth发现问题：一个父div(设father),其内一个子div(设son);当只为son设置宽度且宽度大于浏览器窗口大小（即出现滚动条）时，father.clientWidth的值是son可见区域的大小；但是这时候如果再给father设置宽度（也大于浏览器窗口宽度）时，father.clientWidth始终就是father的宽度了，不是还有一部分不可见吗？

解决方案

当只为son设置宽度且宽度大于浏览器窗口大小（即出现滚动条）时，father.clientWidth的值是son可见区域的大小，这个应该有误吧。应该还是father.clientWidth本身的值（差不多就是浏览器窗口的大小）

offsetWidth：对象自身的宽度(width+padding+border)
clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框

father的offsetWidth和clientWidth值是相对于father自身的。不可见不是指浏览器滚动条隐藏的部分，而是自身滚动条隐藏的部分。

看一个例子

#father{
    border:20px solid #000;
    width:200px;
    height:200px;
    background: #CCC;
    overflow: auto 
}

#son{
    width:300px;
    height:200px;
    background: #600;
}

这篇关于css - 关于JavaScript中元素的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！