js获取dom元素宽高的方法

最新推荐文章于 2024-04-11 16:16:12 发布

Eric Coper

最新推荐文章于 2024-04-11 16:16:12 发布

阅读量1.9k

点赞数 1

分类专栏： js 面试文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_51644864/article/details/130389977

版权

js 面试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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