07-JavaScript DOM事件（第三天 JavaScript中常用的坐标属性）

最新推荐文章于 2024-07-25 09:24:40 发布

yfp020907

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量39

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/yfp020907/article/details/132698514

版权

1.MouseEvent属性

<!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>Document</title>
    <style>
        div {
            width: 2000px;
            height: 1000px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var box = document.getElementsByTagName('div')[0];

        box.onclick = function (e) {
            // console.log(box.clientX);
            // clientX clientY  点击位置距离 body 可视区域的 x 坐标和 y 坐标
            console.log(e.clientX);
            console.log(e.clientY);

            // pageX pageY  （不会随着滚动条的滚动而被改变），对整个页面来说，包括了被卷去的body部分长度，相对于文档区域左上角距离
            console.log(e.pageX);
            console.log(e.pageY);

            // screenX screenY 点击位置距离屏幕边缘的 x 坐标和 y 坐标
            console.log(e.screenX);
            console.log(e.screenY);

            // offsetX  offsetY 鼠标相对于事件源元素的x，y坐标（光标相对于自身盒子内侧的坐标，不包括边框）
            console.log(e.offsetX);
            console.log(e.offsetY);
        }
    </script>
</body>

</html>

2.元素的offset属性，offset翻译过来是偏移量的意思

<!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>Document</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            border: 1px solid skyblue;
            position: relative;
            top: 100px;
            left: 50px;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box" style="background:orange"></div>
    </div>

    <script>
        var box = document.getElementsByClassName('box')[0];

        // DOM 作为对象

        // 只读不可写
        // offsetWidth  盒子的宽
        // offsetHeight  盒子的高
        // offsetLeft   盒子的左偏移量
        // offsetTop    盒子的上偏移量

        // offsetParent  作为参照的父级元素

        console.log(box.offsetLeft);
        console.log(box.offsetTop);

        console.log(box.offsetWidth);
        console.log(box.offsetHeight);

        console.log(box.style.left);  //不会得到偏移量
        console.log(box.style.width);  //不会得到宽
        console.log(box.style.background);  //只有样式在行内才能获取

        // 只能这么设置样式
        // box.style.left = '100px';

        // box.offsetLeft = 400;

    </script>
</body>

</html>

3.元素的client属性

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* background-color: orange; */
            border: 1px solid orange;

        }
    </style>
</head>

<body>
    <div></div>

    <script>
        var box = document.getElementsByTagName('div')[0];

        // clientWidth  clientHeight  元素可视区域的宽高
        console.log(box.clientWidth);
        console.log(box.clientHeight);

        // clientLeft   clientTop   元素边框的厚度
        console.log(box.clientLeft);
        console.log(box.clientTop);
    </script>
</body>

</html>

4.拖拽小盒子案例

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* background-color: orange; */
            border: 1px solid orange;

        }
    </style>
</head>

<body>
    <div></div>

    <script>
        var box = document.getElementsByTagName('div')[0];

        // clientWidth  clientHeight  元素可视区域的宽高
        console.log(box.clientWidth);
        console.log(box.clientHeight);

        // clientLeft   clientTop   元素边框的厚度
        console.log(box.clientLeft);
        console.log(box.clientTop);
    </script>
</body>

</html>

5.盒子移动案例

<!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>Document</title>
    <style>
        .father {
            width: 1000px;
            height: 600px;
            border: 1px solid red;
            position: relative;
            margin: 30px auto;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: orange;
            /* border-radius: 50%; */
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <input type="button" value="向左移动" class="left">
    <input type="button" value="向右移动" class="right">
    <input type="button" value="向上移动" class="top">
    <input type="button" value="向下移动" class="bottom">
    <div class="father">
        <div class="son"></div>
    </div>

    <script>
        var zuo = document.getElementsByClassName('left')[0];
        var you = document.getElementsByClassName('right')[0];
        var shang = document.getElementsByClassName('top')[0];
        var xia = document.getElementsByClassName('bottom')[0];
        var father = document.getElementsByClassName('father')[0];
        var son = document.getElementsByClassName('son')[0];

        zuo.onclick = function () {
            son.style.left = son.offsetLeft - 50 + 'px';
            // console.log(son.offsetLeft);
            if (son.offsetLeft <= 0) {
                son.style.left = 0 + 'px';
            }
        }
        you.onclick = function () {
            son.style.left = son.offsetLeft + 50 + 'px';
            if (son.offsetLeft >= father.offsetWidth - son.offsetWidth - 2) {
                son.style.left = father.offsetWidth - son.offsetWidth - 2 + 'px';
            }
        }
        shang.onclick = function () {
            son.style.top = son.offsetTop - 50 + 'px';
            if (son.offsetTop <= 0) {
                son.style.top = 0 + 'px';
            }

        }
        xia.onclick = function () {
            son.style.top = son.offsetTop + 50 + 'px';
            if (son.offsetTop > father.offsetHeight - son.offsetHeight - 2) {
                son.style.top = father.offsetHeight - son.offsetHeight - 2 + 'px';
            }
        }

        window.onkeydown = function (e) {
            // console.log(e.key);
            // console.log(e.keyCode);
            if (e.keyCode == 39) {
                you.onclick();
            }
        }

    </script>
</body>

</html>