js中元素偏移量offset系列操作案例代码教程

JavaScript中元素偏移量offset系列操作案例代码教程，offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。

1.     <style>
   
2.         div {
   
3.             width: 200px;
   
4.             height: 200px;
   
5.             background-color: pink;
   
6.         }
   
7.     </style>
   
8.     <div class="zidiu">
   
9.     </div>
   
10.     <script>
    
11.         var div = document.querySelector('.zidiu');
    
12.         console.log(div.offsetLeft);
    
13.         console.log(div.offsetTop);
    
14.         console.log(div.offsetWidth);
    
15.         console.log(div.offsetHeight);
    
16.     </script>

复制代码

输出结果为：
8
1.html:24 8
1.html:25 200
1.html:26 200
这里的8位浏览器自带距离，去除方法，样式里面添加代码：

1. * {
   
2.             margin: 0;
   
3.             padding: 0;
   
4.         }

复制代码