[dom] Element.clientWidth

最新推荐文章于 2023-12-20 13:55:01 发布

姜小衰

最新推荐文章于 2023-12-20 13:55:01 发布

阅读量678

点赞数

分类专栏： dom 文章标签： dom

本文链接：https://blog.csdn.net/weixin_36210698/article/details/96904872

版权

dom 专栏收录该内容

3 篇文章

订阅专栏

Element.clientWidth属性对于inline和 (elements with no CSS 不太懂)元素返回 0，
如果不是这样的元素则以象素为单位返回元素的里部距离，它包括内边距但是不包括边框，边距，和垂直的滚动条(如果出现的话)。

语法

var intElemClientWidth = element.clientWidth;

intElementClientWidth是element的clientWidth相对应的整数，单位为像素。clientWidth属性是只读的。
在这里插入图片描述

示例

示例一

<style type="text/css">
    #box {
        height: 200px;
        width: 200px;
        padding: 50px;
        border: 10px solid red;
        overflow: scroll;
    }
</style>
<div id="box">
</div>
</body>
<script type="text/javascript">
    var box = document.getElementById('box')
    console.log(box.clientWidth)
</script>

在这里插入图片描述

clientWidth = 200(宽度) + 100(内边距) - 15(垂直滚动条)

示例二

对于内联元素返回 0

<body>

<style type="text/css">
</style>
<span id="span">span</span>
</body>
<script type="text/javascript">
    var box = document.getElementById('span')
    console.log(box.clientWidth)
</script>