个人总结

通过js来获取元素的宽高以及偏移量
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body{
	    padding: 0;
	    margin: 0;
	    height: 2000px;
        }
        #div1 {
	    width: 100px;      
	    height: 100px;     
            margin: 150px;       
            padding: 50px;       
	    border: 10px solid black;
        }
    </style>
</head>
<body>

    <div id="div1"></div>


    <script type="text/javascript">
 
	 const body = document.querySelector('body')
	 const div = document.getElementById('div1')
	 
	 //返回的是 content + padding
	 console.log(div.clientWidth, div.clientHeight) //200 200
	 
	 //返回的是 border + content + padding
	 console.log(div.offsetWidth, div.offsetHeight) //220 220
	 
	 //返回的是距离相对定位父元素的偏移量
	 console.log(div.offsetLeft, div.offsetTop) //150 150
	 
	 //返回的是当前body可以滚动区域的宽高
	 console.log(body.scrollWidth, body.scrollHeight)
	 
	//关于body的scrollTop/Left 各个浏览器有不同的版本
	//ie: document.body.scrollTop 或 document.documentElement.scrollTop；
	//chrome,firefox: document.documentElement.scrollTop
	//safari: window.pageYOffset ； 
	body.onscroll = function () {
	    console.log(document.documentElement.scrollTop, document.documentElement.scrollLeft)
        }
        
        //可以封装一个函数解决各个浏览器body的scrollTop/Left问题
        function getScroll(){
	    return {
	        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
	        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
	    }
	}
    </script>
</body>
</html>
原文地址：https://www.cnblogs.com/sheep2/p/12731937.html
元素的宽高/偏移量

个人总结
