JavaScript 获取元素位置

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>


<style>

.box{

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




h1{

  height:500px;
}




</style>



</head>
<body>
  



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

<h1>标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题3</h1>



  <script>


var boxid = document.getElementById("box");
var box = document.getElementsByClassName("box")[0];


console.log("-------------------包含内边距，不包含外边距和边框-------------------");

//包含内边距，不包含外边距和边框
console.log("元素宽度：" + box.clientWidth);
console.log("元素高度：" + box.clientHeight);




//包含溢出不可见内容
console.log("-------------------包含溢出不可见内容-------------------");




console.log("元素宽度：" + box.scrollWidth);
console.log("元素高度：" + box.scrollHeight);





console.log("-------------------包含内边距和边框----------------------");


console.log("宽度为：" + box.offsetWidth);
console.log("高度为：" + box.offsetHeight)









console.log("屏幕高度为：" + document.documentElement.clientHeight);
console.log("body宽度为：" + document.body.clientWidth);






console.log("滚动高度为：" + document.documentElement.scrollTop);







  </script>




</body>
</html>