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的长宽信息