关于JavaScript中元素的大小 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

关于JavaScript中元素的大小

2016-06-12 15:54:26 1831 1

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

块级元素当width为auto时,宽度为父级元素宽度,宽度并不会被子元素撑开,用开发者工具看下。

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:34:22

    当只为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;
    }
    

    screenshot

    0 0
相关问答

1

回答

在JavaScript中,当元素失去焦点时会触发什么事件?

2021-11-22 22:02:54 449浏览量 回答数 1

1

回答

在JavaScript中,当元素失去焦点时触发的事件是什么呀?

2021-11-02 21:56:19 429浏览量 回答数 1

1

回答

如何随机化(随机播放)JavaScript数组?

2020-01-13 10:00:55 243浏览量 回答数 1

1

回答

获取Javascript数组中的最后一项

2020-01-13 16:18:02 302浏览量 回答数 1

1

回答

如何在Javascript数组的开头添加新的数组元素?

2020-01-08 16:25:51 266浏览量 回答数 1

1

回答

获取JavaScript数组中的所有唯一值(删除重复项)

2020-01-08 17:17:12 308浏览量 回答数 1

1

回答

如何在JavaScript中合并两个数组并删除重复项

2020-01-08 17:18:48 333浏览量 回答数 1

1

回答

JavaScript 数组的函数 map/forEach/reduce/filter

2019-11-21 15:49:31 831浏览量 回答数 1

1

回答

js怎么把数组转成json字符串数组对象

2018-05-10 20:00:18 1230浏览量 回答数 1

2

回答

关于javascript中给数组新注册方法的后遗症

2016-07-18 10:09:53 1915浏览量 回答数 2
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载