Js如何获取某Dom元素的宽高

作者: 刘哈哈icey | 来源:发表于2020-07-22 16:27 被阅读0次

Js如何获取某Dom元素的宽高
uniapp renderjs
jQuery事件
获取DOM元素宽高
jquery与js加载顺序区别
02-JQuery操作DOM
JS获取宽高
js/jq 获取宽高以及left、top值
js获取元素宽高
js获取元素宽高

（1）dom.style.width/height 获取dom元素内联样式中设定的width，height

（2）dom.currentStyle.width/height 获取dom元素渲染后的width，height，只支持IE

（3）window.getComputedStyle(dom).width/height 浏览器渲染后的元素宽,兼容性更好

（4）dom.getBoundingClientRect().width/height/left/top/right/ 计算一个元素的绝对位置（相对于视窗左上角），它能拿到元素的left、top、right、bottom、width、height

Element.getBoundingClientRect() - Web API 接口参考 | MDN


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    #dom {

      height: 500px;

      width: 500px;

      background: gray;

    }

  </style>

</head>

<body>

  <div id='dom' style="width: 600px;height:400px">

  </div>

</body>

<script>

  let dom = document.getElementById('dom')

  let inlineWidth = dom.style.width; //内联样式中的width height

  console.log("内联样式中的width:", inlineWidth)

  if (dom.currentStyle) {

    let IEDomWidth = dom.currentStyle.width //这种方法获取的是浏览器渲染以后的元素的宽和高，无论是用何种方式引入的css样式都可以，但只有IE浏览器支持这种写法。

    console.log("浏览器渲染后的元素宽，仅IE支持:", IEDomWidth)

  }

  let DomWidthAfterRender = window.getComputedStyle(dom).width

  console.log("浏览器渲染后的元素宽,兼容性更好:", DomWidthAfterRender)

  let relativeViewWidth = dom.getBoundingClientRect().width

  let relativeViewLeft = dom.getBoundingClientRect().left

  console.log("计算一个元素的绝对位置（相对于视窗左上角），它能拿到元素的left、top、right、bottom、width、height:", relativeViewWidth)

  console.log("计算一个元素的绝对位置（相对于视窗左上角），它能拿到元素的left、top、right、bottom、width、height::", relativeViewLeft)

</script>

</html>