[dom] Element.clientWidth
程序员文章站
2022-05-06 09:25:07
...
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>
参考链接
上一篇： 移动端实现蒙层且底部页面不滚动效果
下一篇： 操作DOM简单笔记