getBoundingClientReact.png

    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>getBoundingClientRect</title>
    9.     <link rel="stylesheet" href="css/reset.min.css">
    10.     <style>
    11.         html,
    12.         body {
    13.             height: 300%;
    14.             background: -webkit-linear-gradient(top left, pink, orange);
    15.         }
    16.         #box {
    17.             position: absolute;
    18.             left: 200px;
    19.             top: 800px;
    20.             width: 100px;
    21.             height: 100px;
    22.             background: red;
    23.         }
    24.     </style>
    25. </head>
    26. <body>
    27.     <div id="box"></div>
    28.     <script>
    29.         let box = document.querySelector('#box');
    30.     </script>
    31. </body>
    32. </html>