js中offset、client、scroll、screen、page用法

最新推荐文章于 2024-10-19 09:50:12 发布

原创最新推荐文章于 2024-10-19 09:50:12 发布 · 2.2k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#学习

js 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了网页元素定位中常用的属性，如offset、client、scroll、screen和page，包括它们的含义、用法以及在实际案例中的应用，例如通过offsetWidth和offsetHeight获取元素尺寸，利用clientX和clientY确定鼠标在视口的位置，以及如何利用这些属性实现鼠标拖动效果。

一.offset

offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移），大小等

获取元素距离带有定位父元素的位置
获取元素自身的大小（宽度高度）
注意：返回值都不带单位
常用属性：

1.1 offsetX，offsetY

获取鼠标指针位置相对于触发事件的对象的 x 坐标和y坐标。offsetX （offsetY）规定了事件对象与目标节点的内填充边（padding edge）在 X （Y）轴方向上的偏移量。
在这里插入图片描述

2.2 offsetWidth，offsetHeight

它们都是只读属性，返回一个元素的布局宽度或高度。如果是标准盒子模型那么：
宽度：width + padding + border + scrollbar（如果横向滚动条存在）
高度：height + padding + border + scrollbar（如果纵向滚动条存在）
如果是怪异盒子模型（IE模型，可以通过box-sizing:border-box;设置）：
宽度：width
高度：height
在这里插入图片描述

二.client

client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息，通过client系列的相关属性可以动态的得到该元素得边框大小，元素大小等
在这里插入图片描述

<div class="test">
   </div>

.test {
           width: 100px;
           height: 100px;
           background-color: aqua;
           border: 3px solid;
       }

  var test = document.querySelector(".test")
     console.log(test.clientLeft)
     console.log(test.clientWidth)

在这里插入图片描述

2.1 clientX,clientY

鼠标相对于当前视口的x/y坐标，不不考虑页面滚动的距离。(以视口左上角为原点)
鼠标事件：

  var test = document.querySelector(".test")
   test.addEventListener("click", function (e) {
       console.log(e.clientX + " " + e.clientY)
        })

在这里插入图片描述

三.scroll

scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的获取该元素的大小，滚动距离等
在这里插入图片描述

四.screen

Screen 对象包含有关客户端显示屏幕的信息。
screen.availHeight:返回屏幕的高度（不包括windows任务栏）
screen.alvailWidth:返回屏幕的宽度（不包括windows任务栏）
screen.width:返回屏幕的总宽度
screen.height:返回屏幕的总高度

五.page

5.1 pageX，pageY

pageX和pageY获取的是鼠标指针距离文档（HTML）的左上角距离，不会随着滚动条滚动而改变；

pageX，pageY和offsetX，offsetY的区别：

pageX pageY:鼠标指针的位置，文档的坐标。
offsetX offsetY:鼠标相对于事件源元素的x,y坐标
在这里插入图片描述

六.鼠标事件

在这里插入图片描述

七.案例：鼠标拖动

<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>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        .logIn {
            position: relative;
            width: 500px;
            height: 400px;
            margin: 100px auto;
            /* border: 1px solid black; */
            background-color: aqua;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
        }
        input {
            display: block;
            width: 400px;
            height: 25px;
            margin: 25px auto;
        }
        .title {
            width: 500px;
            height: 50px;
            text-align: center;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="logIn">
        <p class="title">登录界面</p>
        <form action="">
            <input type="text" placeholder="请输入用户名"><br>
            <input type="password" placeholder="请输入密码">
        </form>
    </div>
    <script>
        var title = document.querySelector(".title")
        var logIn = document.querySelector(".logIn");
        //在title区域按下鼠标，移动登录界面
        title.addEventListener("mousedown", function (e) {
            var pageX = e.pageX;
            var pageY = e.pageY;
            var offX = title.offsetTop;
            var offY = title.offsetLeft;
            var x = pageX - offX; //鼠标离title元素的相对x位置
            var y = pageY - offY; //鼠标离title元素的相对y位置
            //鼠标移动，把鼠标在页面中的坐标减去鼠标在盒子内的坐标，就是logIn的top和left值
            document.addEventListener("mousemove", move);

            function move(e) {
                logIn.style.left = e.pageX - x + "px";
                logIn.style.top = e.pageY - y + "px";
            }
            //鼠标弹起，让鼠标移动事件移除
            document.addEventListener("mouseup", function () {
                document.removeEventListener("mousemove", move);
            })

        })
    </script>

</body>