<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>offset</title> <style type="text/css"> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; border:10px solid red; /* display: none; */ margin: 20px; /* position: absolute; */ } .son{ width: 50px; height: 50px; background: pink; margin-left: 20px; margin-top: 20px; padding: 10px; } </style></head><body> <div class="father"> <div class="son"> </div> </div> <div class="sub"></div> <script type="text/javascript"> var son = document.querySelector('.son') var father = document.querySelector('.father') //offset 智能读取 console.log(father.offsetLeft) console.log(father.offsetTop) // 盒子 的宽度 console.log(son.offsetWidth) // 盒子 的高度 console.log(son.offsetHeight) // 盒子 和浏览器边框的x轴距离 console.log(son.offsetTop) // 盒子 和浏览器边框的Y轴距离 console.log(son.offsetLeft) //寻找有定位的父级 如果没有定位 直接找到 body console.log(son.offsetParent) </script></body></html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
