js获取dom的信息

124 阅读1分钟

Element.getBoundingClientRect() 方法返回一个 DOMRect 对象,其提供了元素的大小及其相对于视口的位置信息。

<style>
div {
  padding: 20px;
  margin: 50px auto;
  background: purple;
}
</style>

<div>11111111111111111111</div>

<script>
let elem = document.querySelector('div');
let rect = elem.getBoundingClientRect();
for (var key in rect) {
  if (typeof rect[key] !== 'function') {
    let para = document.createElement('p');
    para.textContent = `${key} : ${rect[key]}`;
    document.body.appendChild(para);
  }
}
</script>

例子中没有写 width/height,也能获取到dom的长宽信息