JS Element获取元素位置

.box{
            width: 200px;
            height: 200px;
            border: 10px solid red;
            padding: 20px;
            margin: 10px;
            background-color: green;
        }

<div class="box" id="box"></div>

var box = document.getElementById("box")
console.log(box.clientHeight);
console.log(box.clientWidth);

//获取视口高度      console.log(document.documentElement.clientHeight);
//获取页面高度（内容多大有多大）
console.log(document.body.clientHeight);

h3{
            height: 200px;
}

<h3>页面1</h3>
<h3>页面1</h3>
<h3>页面1</h3>
<h3>页面1</h3>
<h3>页面1</h3>

.box{
            width: 200px;
            height: 200px;
            background-color: green;
            margin-left:100px ;
        }
.root{
            position: relative;
            height: 500px;
            width: 300px;
            background-color: pink;
        }

//元素距离父级元素（要有定位，否则以文档为父级元素）的距离
        console.log(box.offsetTop);
        console.log(box.offsetLeft);