<!DOCTYPE html> <html lang="en"> <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>Document</title> <style> #app{ width: 200px; height: 200px; background-color: red; margin: 100px auto; } </style> </head> <body> <div id="app"></div> <script> const app = document.getElementById("app") const news = app.getBoundingClientRect() console.log(news.top,"top") console.log(news.right,"right") console.log(news.bottom,"bottom") console.log(news.left,"left") </script> </body> </html>