13.获取元素节点.html 843 B

123456789101112131415161718192021222324252627282930
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. #box {
  9. width: 200px;
  10. height: 300px;
  11. margin-left: 30px;
  12. margin-top: 60px;
  13. background: aqua;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div id="box"></div>
  19. <script>
  20. var box = document.getElementById("box");
  21. console.log(box);
  22. // box.style.marginLeft = 100 + 'px';
  23. console.log(box.offsetHeight); // 获取元素自身高度
  24. console.log(box.offsetWidth); // 获取元素自身宽度
  25. console.log(box.offsetLeft); // 获取元素到左侧的距离
  26. console.log(box.offsetTop); // 获取元素到顶部的距离
  27. </script>
  28. </body>
  29. </html>