Detailed explanation of three commonly used web effects in JavaScript

    <div id="box"></div>
    <script>
        var box = document.querySelector('#box');
        //1. Output the width and height of the box console.log("width:", box.offsetWidth);
        console.log("Height:", box.offsetHeight);
        //2. Bind the mouse movement event to boxbox.addEventListener('mousemove', function (e) {
            //2.1 Get the offset of box var left = box.offsetLeft;
            var top = box.offsetTop;
            console.log("Offset: (" + left + "," + top + ")");
            //2.2 Calculate the coordinates of the mouse pointer in the box var x = e.pageX - left;
            var y = e.pageY - top;
            console.log("x-axis coordinate: " + x + ", y-axis coordinate: " + y);
        })
    </script>

    <div></div>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 3px solid yellow;
        }
    </style>
    <script>
        //Get the div element let div = document.querySelector("div");
        //Output the size of the left and top borders of the element console.log("Size of the left border:", div.clientLeft);
        console.log("Top border size:", div.clientTop);
        // Output the element's own width and height (excluding borders)
        console.log("Width:", div.clientWidth);
        console.log("Height:", div.clientHeight);
    </script>

    <div>
        I am the content ...</div><br>
    <button>Click to get the rolled height and width</button>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* Scroll the elements that cannot be placed to display them*/
            overflow: scroll;
        }
    </style>
    <script>
        //1. Get the div and button elements in the page
        let div = document.querySelector("div");
        let button = document.querySelector("button");
        //2. Output its own height and width console.log("Height:", div.scrollHeight);
        console.log("Width:", div.scrollWidth);
        //Register a click event for the button, and output the height and width of the scroll after clicking button.addEventListener("click", function () {
            console.log("Scroll height:", div.scrollTop);
            console.log("Scroll width:", div.scrollLeft);
        })
    </script>