JavaScript 获取 DOM 元素宽高的四种常用方法

作者：像素猫

时间：2026-10-31

本文介绍了在 JavaScript 中获取 DOM 元素宽高的四种常用方法。包括仅支持内联样式的 dom.style、仅支持 IE 的 currentStyle、兼容性最好的 window.getComputedStyle，以及用于计算绝对位置的 getBoundingClientRect。通过对比各方法的适用范围与浏览器兼容性，帮助开发者根据实际需求选择最合适的方案。

文章目录

① dom.style.width / height

该方法存在一定局限性，仅能获取通过内联样式（inline style）直接设置的宽高值。

   <div id="id" style="height: 100px"></div>
    <script>
      var d = document.getElementById('id').style.height
      console.log(d)
    </script>

② dom.currentStyle.width / height

此方法虽然可以获取三种常见 CSS 样式（内联、内部、外部）定义的宽高，但仅支持 Internet Explorer 浏览器，其他现代浏览器并不支持。

③ window.getComputedStyle(dom).width / height

        var d = document.getElementById('id')
     console.log( window.getComputedStyle(d).height)

该方法兼容性良好，支持所有主流浏览器，是获取元素计算后宽高的推荐方式之一。

④ dom.getBoundingClientRect().width / height

此方法通常用于计算元素的绝对位置，其坐标基准为视口左上角。调用该方法可返回包含 left、top、width 和 height 四个属性的对象，从而获取元素的宽高及位置信息。

  <style>
    #id{
        height: 100px;
        width: 100px;
        margin-left: 20px;
        margin-top: 20px;
    }
  </style>
<body>
   <div id="id"></div>
    <script>
        // 只支持内联样式
      // var d = document.getElementById('id').style.height
      // console.log(d)
        //都支持，兼容性好
     //    var d = document.getElementById('id')
     // console.log( window.getComputedStyle(d).height)
        var d = document.getElementById('id')
        console.log(d.getBoundingClientRect())
    </script>
</body>

① dom.style.width / height