[dom] offsetWidth

HTMLElement.offsetWidth返回元素的布局宽度的整数值。

通常来讲 offsetWidth通常以像素为单位测量元素 CSS 宽,包括边框,边距、和垂直滚动条(如果渲染了)。它不包括伪元素的宽例如::before::after

如果元素隐藏了(例如了元素或其祖先元素的style.displaynone),则会返回 0。

[dom] offsetWidth_第1张图片

语法

var intElementOffsetWidth = element.offsetWidth;

intElementOffsetWidth返回元素相关的offsetWidth整数,以像素为单位。offsetWidth属性是只读的

示例

<body>

<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.offsetWidth)
script>

[dom] offsetWidth_第2张图片

offsetWidth = width + padding + border

参考链接

  • HTMLElement.offsetWidth

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