脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js获取dom元素宽高

js获取dom元素宽高的几种方法

 更新时间：2023年08月05日 09:33:08   作者：Eric Coper  
这篇文章主要给大家介绍了关于js获取dom元素宽高的几种方法,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下

① dom.style.width / height

这种⽅法，有⼀定局限性，只能取内联样式的宽⾼。

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

② dom.currentStyle.width / height

这种⽅法，也是有⼀定局限性，不过我们三种常⽤css样式都能获取。但是只⽀持 IE ，其它浏览器不⽀持

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

总结

到此这篇关于js获取dom元素宽高的几种方法的文章就介绍到这了,更多相关js获取dom元素宽高内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论