[dom] Element.clientWidth

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

语法

var intElemClientWidth = element.clientWidth;

intElementClientWidthelementclientWidth相对应的整数,单位为像素。clientWidth属性是只读的。
[dom] Element.clientWidth_第1张图片

示例

示例一

<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>

[dom] Element.clientWidth_第2张图片

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

示例二

对于内联元素返回 0

<body>

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

[dom] Element.clientWidth_第3张图片

参考链接

  • Element.clientWidth

你可能感兴趣的:(dom,dom)