1 <div class="box1"></div> 2 <script> 3 var box = document.querySelector(‘.box1‘) 4 console.log(box.offsetTop); 5 console.log(box.offsetLeft); 6 console.log(box.offsetWidth); 7 console.log(box.offsetHeight); 8 console.log(box.offsetParent); 9 </script>
1 <script> 2 var box = document.querySelector(‘.box1‘) 3 console.log(box.offsetWidth); 4 console.log(box.style.width); 5 </script>
1 .box { 2 width: 200px; 3 height: 200px; 4 background-color: pink; 5 position: absolute; 6 left: 100px; 7 top: 100px; 8 }
1 <div class="box"></div> 2 <script> 3 var box = document.querySelector(‘.box‘) 4 box.addEventListener(‘mousemove‘, function (e) { 5 var x = e.pageX - this.offsetLeft; 6 var y = e.pageY - this.offsetTop; 7 this.innerHTML = ‘x坐标是‘ + x + ‘y坐标是‘ + y; 8 }) 9 </script>
原文:https://www.cnblogs.com/xf2764/p/12672949.html