<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; margin-top: 100px; margin-left: 100px; background: blue; overflow: hidden; /*position: relative;*/ } .son{ width: 100px; height: 100px; margin-top: 100px; margin-left: 100px; background: red; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> <script type="text/javascript"> /*
1.offsetLeft和offsetTop作用
获取元素到第一个定位祖先元素之间的偏移位
如果没有祖先元素是定位的, 那么就是获取到body的偏移位
*/ let oSDiv = document.querySelector(".son"); oSDiv.onclick=function() { console.log(oSDiv.offsetLeft); console.log(oSDiv.offsetTop); } </script> </body> </html>
div.offsetLeft offsetTop详解
关注
打赏
