<!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)//寻找有定位的父级 如果没有定位 直接找到 bodyconsole.log(son.offsetParent)</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
