JavaScript三种常用网页特效详解

    <div id="box"></div>
    <script>
        var box = document.querySelector('#box');
        //1.输出box的宽度和高度
        console.log("宽度：", box.offsetWidth);
        console.log("高度：", box.offsetHeight);
        //2.给box绑定鼠标移动的事件
        box.addEventListener('mousemove', function (e) {
            //2.1 获取box的偏移量
            var left = box.offsetLeft;
            var top = box.offsetTop;
            console.log("偏移量：("   left   ","   top   ")");
            //2.2 计算鼠标指针在box中的坐标
            var x = e.pageX - left;
            var y = e.pageY - top;
            console.log("x轴坐标："   x   ",y轴坐标："   y);
        })
    </script>

    <div></div>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 3px solid yellow;
        }
    </style>
    <script>
        //获取div元素
        let div = document.querySelector("div");
        //输出元素左边框和上边框的大小
        console.log("左边框的大小：", div.clientLeft);
        console.log("上边框的大小：", div.clientTop);
        //输出元素自身宽度和高度（不含边框）
        console.log("宽度为：", div.clientWidth);
        console.log("高度为：", div.clientHeight);
    </script>

    <div>
        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
    </div><br>
    <button>点击获取卷起来的高度和宽度</button>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 将放不下的元素滚动来显示 */
            overflow: scroll;
        }
    </style>
    <script>
        //1、获取页面中的元素div和button
        let div = document.querySelector("div");
        let button = document.querySelector("button");
        //2、输出自身的高度和宽度
        console.log("高度为：", div.scrollHeight);
        console.log("宽度为：", div.scrollWidth);
        //给按钮注册click点击事件，点击之后输出卷起来的高和宽
        button.addEventListener("click", function () {
            console.log("卷起来的高度：", div.scrollTop);
            console.log("卷起来的宽度：", div.scrollLeft);
        })
    </script>