1. 元素偏移量offset

1.1 offset介绍

offset：偏移量,可以利用offset动态的获取元素在页面中的位置大小信息。

属性	说明
offsetLeft	返回元素相对于带有定位的父元素左边框的偏移
offsetTop	返回元素相对于其带有定位的元素上方的偏移
offsetWidth	返回自身宽度(包括padding、边框和内容区域的宽度)，返回值不带单位
offsetHeight	返回自身高度(包括padding、边框和内容区域的高度)，返回值不带单位
offsetParent	返回作为该元素带有定位元素的父级元素

1.2 获取鼠标位置

获取鼠标位置： 鼠标指针在盒子内的坐标位置示意图分析。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>offset</title>
</head>
<style>
    #box{
        background-color: hotpink;
        width: 200px;
        height: 200px;
        position: absolute;
        left: 50px;
        top: 20px;
    }
</style>
<body>
    <div id="box"></div>

    <script>
        console.log('宽度：'+box.offsetWidth);
        console.log('高度：'+box.offsetHeight);
         //给box绑定鼠标移动事件
        box.onmousemove = function(e){//参数e代表事件对象 在这里表示mouseEvent
            
            //获取box盒子的偏移量
            var left = box.offsetLeft;
            var top = box.offsetTop;

            console.log('左边偏移量：'+left);
            console.log('顶部偏移量：'+top);

            //获取鼠标指针在盒子box内部的坐标
            var x = e.pageX - left;
            var y = e.pageY - top;

            console.log(x,y);
        }
    </script>
</body>
</html>

1.3 模态框拖曳效果

案例展示：
在这里插入图片描述

案例分析设计图：在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块框拖拽效果</title>
</head>
<style>
    /* 遮罩层样式 */
    .login-bg{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #ccc;
        display: none;
    }

    /* 模块框样式 */
    .model{
        width: 500px;
        height: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        display: none;
        box-shadow: 0px 0px 20px #ddd;
        z-index: 999;
        cursor: move;
    }

    .model form{
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
    }

    .model form .item1{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center; 
        font-weight: bold; 
    }

    .model form .item2{
        margin: 0 auto;
        width: 70%;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    .username{
        margin-left: 16px;
    }
    
    .vip{
        border: 1px solid #ccc;
        border-radius: 20px;
        padding: 3px 40px;
        background-color: orange;
        color: #fff;
    }

    .close{
        position: absolute;
        right: -10px;
        top: -10px;
        border: 1px solid #ccc;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 17px;
        border-radius: 50%;
        background-color: white;
    }

    /* 单击弹出遮罩层样式 */
    .login-header{
        width: 100%;
        text-align: center;
        font-size: 20pt;
        position: absolute;
    }
</style>
<body>
    <!-- 遮罩层 -->
    <div class="login-bg"></div>

    <!-- 模块框 -->
    <div class="model">
        <form>
            <div class="item1">登录会员</div>
            <div class="item2">
                <div class="username">
                    <label for="username">用户名：</label>
                    <input type="text" name="username">
                </div>
                <div>
                    <label for="password">登录密码：</label>
                    <input type="text" name="password">
                </div>
            </div>
            <div class="item1">
                <div class="vip">登录会员</div>
            </div>
        </form>
        <!-- 模块框关闭按钮 -->
        <div class="close">x</div>
    </div>

    <!-- 单击弹出遮罩层 -->
    <div class="login-header">单击，登录会员....</div>

    <script>
        //获取元素对象
        var model = document.querySelector('.model');
        var close = document.querySelector('.close');
        var login = document.querySelector('.login-header');
        var bg = document.querySelector('.login-bg');
        
        //单击弹出遮罩层和模块框
        login.addEventListener('click',function(){
            model.style.display = 'block';
            bg.style.display = 'block';
            model.style.backgroundColor = 'white';
        });
        //单击关闭模块
        close.addEventListener('click',function(){
            model.style.display = 'none';
            bg.style.display = 'none';
        });
        //拖动模块框
        model.addEventListener('mousedown',function(e){
            //当鼠标按下，获取鼠标在模块框中的坐标
            var x = e.pageX - model.offsetLeft;
            var y = e.pageY - model.offsetTop;
            //定义事件回调函数
            var move = function(e){
                model.style.left = e.pageX - x + 'px';
                model.style.top = e.pageY - y + 'px';
            };
            //鼠标按下，触发鼠标移动事件
            document.addEventListener('mousemove',move);
            //鼠标抬起，移除鼠标移动事件
            document.addEventListener('mouseup',function(e){
                document.removeEventListener('mousemove',move)
            })
        })
    </script>
</body>
</html>

2. 元素可视区client

client：客户端，通过client可以获取元素在浏览器可视区的相关信息。

属性	说明
clientTop	返回元素左边框的大小
clientTop	返回元素上边框的大小
clientWidth	返回自身宽度(包括padding、边框和内容区域的宽度)，返回值不带单位
clientHeight	返回自身高度(包括padding、边框和内容区域的高度)，返回值不带单位


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        border: 10px solid red;
        padding: 10px;
      }
    </style>
  <body>
    <div>
      我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容我是内容
    </div>
    <script>
      var div = document.querySelector('div');
      console.log('元素左边框大小:',div.clientLeft);
      console.log('元素上边框大小:',div.clientTop)
      console.log('元素自身宽度:',div.clientWidth)
      console.log('元素自身高度:',div.clientHeight)
    </script>
  </body>
</html>

在这里插入图片描述

3. 元素滚动scroll

属性	说明
元素.scrollWidth	获取元素的实际内容宽
元素.scrollHeight	获取元素的实际内容高
元素.scrollTop	元素被卷去的高
元素.scrollLeft	元素被卷去的宽


<!DOCTYPE html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        overflow: auto;
        border: 10px solid red;
        padding: 10px;
      }
    </style>
  <body>
    <div>
      我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
      我是内容我是内容我是内容我是内容我是内容
    </div>
    <script>
        var div = document.querySelector('div');
        console.log("元素内容的高度："+div.scrollHeight);
        console.log('元素内容的宽度：'+div.scrollWidth)
        div.onscroll = function () {
            console.log('被卷的左侧距离：'+div.scrollLeft)
            console.log('被卷的上方距离：'+div.scrollTop)
        };
    </script>
  </body>
</html>