getClientRects...

by Mike Lin

HTML

<span class="test1">
这是测试getClientRects，看看换行的效果是什么，换行的效果是什么，换行的效果是什么，换行的效果是什么，换行的效果是什么
</span>
<br />
<br />
<div class="test2">
这是块级元素，所以即使换行也不会出现上面的情况，getClientRects获取到的集合长度仍然为1.
</div>
<div class="result">
<p>
测试结果如下：
</p>
<p class="rs">

</p>
</div>

CSS

.test1{
  padding: 1px;
  margin: 1px;
  border: 2px solid #000;
  overflow: auto;
}
.test2{
  padding: 1px;
  margin: 1px;
  border: 2px solid #000;
  overflow: auto;
}

JavaScript

const test1 = document.querySelector('.test1')
const test2 = document.querySelector('.test2')
const rs = document.querySelector('.rs')
const rs1 = test1.getClientRects()
const rs2 = test2.getClientRects()
const rs3 = test2.getBoundingClientRect()

rs.innerHTML =`
span的getClientRects()：${JSON.stringify(rs1)}
div的getClientRects()：${JSON.stringify(rs2)}
getBoundingClientRect()：${JSON.stringify(rs3)}
`