各种边距clientWidth、offsetWidth、scrollWidth、clientLeft、getBoundingClientRect详解

1、clientWidth、offsetWidth、scrollWidth

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>#box1 {padding: 50px;position: static;}#box {border: 1px solid red;overflow: scroll;height: 200px;width: 500px;}#content {width: 1200px;height: 1200px;}</style></head><body><div id="box1"><div id="box"><div id="content">aaaaa</div></div></div></body><script>var a = document.getElementById("box");console.log(a.clientWidth);console.log(a.scrollWidth);console.log(a.offsetWidth);console.log(a.clientLeft);console.log(a.offsetLeft);console.log(a.scrollLeft);</script>
</html>

2、getBoundingClientRect

getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>#box1 {padding: 50px;position: static;}#box {border: 1px solid red;overflow: scroll;height: 200px;width: 500px;}#content {width: 1200px;height: 1200px;}</style></head><body><div id="box1"><div id="box"><div id="content">aaaaa</div></div></div></body><script>var a = document.getElementById("box");console.log(a.clientWidth);console.log(a.scrollWidth);console.log(a.offsetWidth);console.log(a.clientLeft);console.log(a.offsetLeft);console.log(a.scrollLeft);console.log('=============================')var b = a.getBoundingClientRect();console.log(b.left)console.log(b.right)console.log(b.top)console.log(b.bottom)</script>
</html>