<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { position: relative; 300px; height: 300px; background-color: red; overflow: hidden; margin: 50px; } #child { 100px; height: 100px; background-color: blue; margin: 50px; border: 10px solid yellow; padding: 10px; } </style> </head> <body> <div id="box"> <div id="child"> </div> </div> <script> // 3组和大小 位置相关的属性 // offset client scroll // // offset 偏移量 // var box = document.getElementById('box'); // // 获取box的坐标 // console.log(box.offsetLeft); // console.log(box.offsetTop); // // 获取box的大小 // console.log(box.offsetWidth); // console.log(box.offsetHeight); // offsetParent 获取距离当前元素最近的定位父元素，如果没有定位父元素此时是body // 获取子元素的位置和大小 var child = document.getElementById('child'); console.log(child.offsetParent); // 获取child的位置 offsetLeft 距离offsetParent的横向偏移 console.log(child.offsetLeft); console.log(child.offsetTop); // 获取child的大小 包括边框和padding console.log(child.offsetWidth); console.log(child.offsetHeight); </script> </body> </html>