js操作元素的其他操作(4个案例+效果图+代码)

🕗 发布于 2024-10-08 00:13 javascript 前端 html html5 vscode

目录

1. 获取元素的位置和大小

案例:获取元素的位置和大小

1.代码

2.效果

2. 获取元素的可视区域

案例:获取元素的可视区域

1.代码

2.效果

3. 元素的滚动操作

案例:元素的滚动操作

1.代码

2.效果

4. 获取鼠标指针位置

案例:时刻获取鼠标位置

1.代码

2.效果

案例:拖动的小球

1.代码

2.效果

1. 获取元素的位置和大小

offsetParent: 返回作为该元素带有定位元素的最近的（指包含层级上的）元素。如果这个元素本身或者其任何父级没有使用CSS定位，则offsetParent通常是<body>元素。
offsetLeft: 返回当前元素相对于其offsetParent元素左边的距离，不包括边框、外边距和内边距。
offsetTop: 返回当前元素相对于其offsetParent元素顶部的距离，同样不包括边框、外边距和内边距。
offsetWidth: 返回元素的布局宽度，包括padding、内容区域和border，但不包括margin。
offsetHeight: 返回元素的布局高度，包括padding、内容区域和border，但不包括margin。

案例:获取元素的位置和大小

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素的位置和大小</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        #myDiv {
            background-color: #fff;
           border: 1px solid #ccc;
        }
    </style>


</head>
<body>
    <div id="myDiv">这是一个元素</div>
    
    <!-- 获取元素的位置和大小 -->
     <script>
        //获取div元素
        var myDiv = document.getElementById("myDiv");
        console.log(myDiv);
        console.log(myDiv.offsetWidth);
        console.log(myDiv.offsetHeight);
        console.log(myDiv.offsetLeft);
        console.log(myDiv.offsetTop);
        
    </script>
</body>
</html>

2.效果

2. 获取元素的可视区域

clientLeft: 返回元素左侧边框的宽度。
clientTop: 返回元素顶部边框的高度。
clientWidth: 返回元素内部的宽度，即内容区域加上内边距（padding），但不包括边框（border）、外边距（margin）和垂直滚动条（如果有）。
clientHeight: 返回元素内部的高度，即内容区域加上内边距（padding），但不包括边框（border）、外边距（margin）和水平滚动条（如果有）。

案例:获取元素的可视区域

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素的可视区域</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        #myDiv {
            background-color: #fff;
           border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="myDiv">我是一个div元素</div>

    <script>
        //获取控件
        var myDiv = document.getElementById("myDiv");

        console.log(myDiv.clientLeft)
        console.log(myDiv.clientTop)
        console.log(myDiv.clientWidth)
        console.log(myDiv.clientHeight)
    </script>
    
</body>
</html>

2.效果

3. 元素的滚动操作

scrollLeft: 设置或返回一个元素被滚动到左侧的距离。
scrollTop: 设置或返回一个元素被滚动到顶部的距离。
scrollWidth: 返回元素内容的完整宽度，即使该内容在视图中不可见（比如超出容器的部分）。它包含了元素的内容宽度加上padding，但不包括border和margin。
scrollHeight: 返回元素内容的完整高度，与scrollWidth类似，它也考虑了那些可能由于滚动而未显示的内容部分。

案例:元素的滚动操作

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的滚动操作</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        #container {
            background-color: #fff;
            border: 1px solid #ccc;
        }
        #box {
            width: 200px;
            height: 100px;
            background-color: #007bff;
            border-radius: 5px;
            /** 滚动设置*/
            overflow: scroll;
        }
    </style>
</head>
<body>
    
    <div id="container">
        <div id="box">
            <p>这是一篇很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文章</p>
        </div>
    </div>
    <!-- 元素的滚动操作 -->
     <script>
        // 获取元素
        var box = document.querySelector("#box");

        // 事件
        box.addEventListener("scroll",()=>{
            console.log("滚动了");
            console.log(box.scrollTop);
            console.log(box.scrollLeft);
            console.log(box.scrollHeight);
            console.log(box.scrollWidth);
        })

     </script>
    
</body>
</html>

2.效果

4. 获取鼠标指针位置

clientX 和 clientY: 在事件对象中提供鼠标点击时相对浏览器窗口（viewport）的坐标。
pageX 和 pageY: 提供鼠标点击时相对于整个文档的坐标，不受滚动影响。
screenX 和 screenY: 给出鼠标点击时相对于用户屏幕左上角的绝对坐标，这通常用于跨窗口或全屏应用程序。

案例:时刻获取鼠标位置

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时获取鼠标位置</title>

</head>

<body>
    <div id="mousePosition">
        <p>鼠标位置：</p>
        <p id="mouseX"></p>
        <p id="mouseY"></p>
    </div>
    <button id="onButton">装载时刻获取鼠标位置</button>
    <button id="offButton">卸载时刻获取鼠标位置</button>

    <!-- script挂载鼠标移动事件 -->
    <script>
        //获取显示组件
        var mousePosition = document.getElementById("mousePosition");

        //获取按钮
        var onButton = document.getElementById("onButton");
        var offButton = document.getElementById("offButton");

        // 鼠标移动事件处理函数
        function handleMouseMove(event) {
            var mouseX = document.getElementById("mouseX");
            var mouseY = document.getElementById("mouseY");
            // 获取鼠标相对于窗口的位置
            var mouseXa = event.clientX;
            var mouseYa = event.clientY;

            //这个应该是更新文档


            mouseX.textContent = "X: " + mouseXa;
            mouseY.textContent = "Y: " + mouseYa;
        }

        // 装载dom节点
        onButton.onclick = function () {
            document.addEventListener("mousemove", handleMouseMove);
        };
        //卸载dom节点
        offButton.onclick = function () {
            document.removeEventListener("mousemove", handleMouseMove);
        };
    </script>

</body>

</html>

2.效果

3.解释

这段HTML代码创建了一个简单的网页，它能够实时显示鼠标在页面上的位置。这里有两个按钮：“装载时刻获取鼠标位置”和“卸载时刻获取鼠标位置”，用户可以通过点击这两个按钮来控制是否开启或关闭实时鼠标位置的追踪功能。下面我用口语化的语言来解释一下这段代码：

页面结构:
- 有一个标题叫做“实时获取鼠标位置”。
- 页面中包含一个div元素，用来展示鼠标的位置信息。这个div里有三个段落（p标签）：第一个段落是静态文本“鼠标位置：”，接下来两个分别用于显示鼠标的X坐标和Y坐标。
- 页面上有两个按钮，一个是用来启动鼠标位置追踪的，另一个是用来停止追踪的。
JavaScript脚本:
- 首先，通过document.getElementById方法找到了页面中的几个关键元素：显示鼠标位置的div以及两个按钮。
- 定义了一个函数handleMouseMove，每当鼠标在文档上移动时，这个函数就会被调用。在这个函数里，会读取当前鼠标相对于浏览器窗口的X和Y坐标，并更新到页面上相应的段落里。
- onButton按钮绑定了一个点击事件处理程序，当用户点击这个按钮时，会为整个文档添加一个鼠标移动事件监听器，这样每次鼠标移动都会触发handleMouseMove函数。
- offButton按钮绑定了另一个点击事件处理程序，它的作用正好相反，即移除之前添加的鼠标移动事件监听器，从而停止更新鼠标位置。

简单来说，当你打开这个网页时，你可以看到两个按钮。如果你点击了“装载时刻获取鼠标位置”按钮，那么无论你把鼠标移动到页面的哪个地方，页面都会显示出当前鼠标的具体位置（X坐标和Y坐标）。而一旦你点击了“卸载时刻获取鼠标位置”按钮，这种追踪就会停止，页面不再显示鼠标的实时位置。

案例:拖动的小球

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖动小球</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #ball {
            width: 50px;
            height: 50px;
            background-color: #007bff;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: move;
            /**动画挂载*/
            animation: ballBreath 1s linear infinite;
        }

        /**小球呼吸动画+色变+频率比较高*/
        @keyframes ballBreath {
            0% {
                transform: scale(1);
                background-color: #2f72b9;
            }

            10% {
                transform: scale(1.2);
                background-color: #beb59a;
            }

            20% {
                transform: scale(1);
                background-color: #0ff855;
            }

            30% {
                transform: scale(1.2);
                background-color: #271e05;
            }

            40% {
                transform: scale(1);
                background-color: #8a1ee2;
            }

            50% {
                transform: scale(1.2);
                background-color: #bd1616;
            }

            60% {
                transform: scale(1);
                background-color: #00db63;
            }

            70% {
                transform: scale(1.2);
                background-color: #d3e010e5;
            }

            80% {
                transform: scale(1);
                background-color: #007bff;
            }

            90% {
                transform: scale(1.2);
                background-color: #13fc4d;
            }

            100% {
                transform: scale(1);
                background-color: #007bff;
            }
        }

        .mouse-position {
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            margin-top: 20px;
            width: 300px;
            text-align: center;
        }

        .mouse-position p {
            margin: 5px 0;
        }

        audio {
            display: none;
        }
    </style>
</head>

<body>

    <div id="ball"></div>
    <audio id="myAudio" src="https://freepd.com/music/The%20Celebrated%20Minuet.mp3" loop autoplay hidden></audio>
    <div class="mouse-position">
        <p>小球位置：</p>
        <p id="mouseX"></p>
        <p id="mouseY"></p>
    </div>

    <!-- 拖动小球的功能 -->
    <script>
        // 获取小球
        var ball = document.querySelector("#ball");

        // 小球按下事件 //挂载mousemove事件
        ball.onmousedown = function (event) {
            // 挂载函数
            ball.onmousemove = function (event) {
                moveBall(event);
            }
        }

        // 小球松开鼠标事件  //卸载mousemove事件
        ball.onmouseup = function () {
            ball.onmousemove = null;
        }

        // 时刻获取鼠标位置和设置小球位置
        function moveBall(event) {
            // 获取鼠标位置
            var mouseX = event.clientX;
            var mouseY = event.clientY;

            // 设置小球位置
            ball.style.left = mouseX - ball.offsetWidth / 2 + "px";
            ball.style.top = mouseY - ball.offsetHeight / 2 + "px";

            // 坐标刷新
            var mouseXElement = document.getElementById("mouseX");
            var mouseYElement = document.getElementById("mouseY");
            mouseXElement.textContent = "X: " + mouseX;
            mouseYElement.textContent = "Y: " + mouseY;
        }
    </script>
</body>

</html>

2.效果

3.解释

这段代码创建了一个网页，其中包含一个小球，用户可以用鼠标拖动这个小球，并且会显示小球当前的位置。此外，还有一个背景音乐自动播放。下面我用口语化的语言来解释一下这段代码：

页面设置:
- 首先定义了网页的基本信息，比如字符集是UTF-8，确保文字能正确显示。
- 设置了视口（viewport），让网页在移动设备上看起来更好。
- 网页标题叫做“拖动小球”。
样式:
- 页面的背景颜色设置为浅灰色，字体使用Arial或类似的无衬线字体。
- 小球是一个50x50像素的圆形，初始时位于屏幕正中，有一个呼吸效果（即大小和颜色随时间变化）。
- 有个看不见的小方块用来显示鼠标位置。
小球动画:
- 小球有一个叫ballBreath的动画，它会让小球不断地改变大小（从正常到稍微大一点再回到正常）并且同时改变颜色，这个过程持续一秒，然后重复。
- 动画过程中颜色会在多种预设的颜色之间切换，给小球一个生动的效果。
音频:
- 加载了一段音乐并让它循环播放。音乐文件是从一个外部链接获取的，用户看不到这个播放器，因为它被隐藏了。
鼠标操作:
- 当用户点击小球并开始拖动时，浏览器会监听鼠标的移动事件。
- 拖动时，小球会跟随鼠标指针移动到新位置，同时更新显示鼠标坐标的位置。
- 用户松开鼠标后，停止监听鼠标移动事件，这样小球就不会继续跟着鼠标走了。

总的来说，这段代码实现了一个互动性很强的小球，可以随着用户的鼠标动作移动，并伴随着背景音乐。当你拖动小球时，还会实时看到它的X和Y坐标。

原文地址：https://blog.csdn.net/2301_76862031/article/details/142745911

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

无人机集群路径规划：四种优化算法（BKA、CO、PSO、PIO）求解无人机集群路径规划，提供MATLAB代码
无人机三维路径规划是指在三维空间中为无人机规划一条合理的飞行路径，使其能够安全、高效地完成任务。路径规划是无人机自主飞行的关键技术之一，它可以通过算法和模型来确定无人机的航迹，以避开障碍物、优化飞行时
阅读更多2024-10-08
什么是变阻器？
通过合理地设置变阻器的电阻值，可以将电源电压分成所需的多个电压值，从而满足电路的需求。
阅读更多2024-10-08
malloc分配内存的两种方式——brk、mmap
从操作系统角度来看，进程分配内存有两种方式，分别由两个完成。
阅读更多2024-10-08
自动生成实体类，mapper类，mapper.xml文件
自动生成实体类，mapper类，mapper.xml文件
阅读更多2024-10-08
tcpdump-arm平台移植
tcpdump-arm平台移植
阅读更多2024-10-08
JavaEE: 深入解析HTTP协议的奥秘(3)
解决方案: 同时开发出多个不同版本的页面(有的只有文字图片,有的包含复杂多媒体),判断 UA 字段,通过 UA 获取到用户的浏览器信息和操作系统信息,这样就可以判定当前用户的浏览器版本都支持哪些特性,
阅读更多2024-10-08
C++多态常见问题
重写指的是在继承关系中子类重新定义继承来的虚函数重写的函数名\参数列表\返回值类型必须和父类一致被继承的函数必须是虚函数可以指定父类显示调用基类的被重写函数属于动态多态通过重写子类中的虚函数
阅读更多2024-10-08
数据库增，删，改常用语句
select语句中只允许被分组的列和为每个分组返回的一个值的表达试，例如用一个列名作为参数的聚合函数。说明：在strdents表和score表中查询满足on条件的行，条件为score表的strdent
阅读更多2024-10-08
深搜剪枝优化
！！！！！
阅读更多2024-10-08
ssm题库管理系统的设计与实现
需要定制毕设请私聊，海量题目可选，你选题目我出功能
阅读更多2024-10-08

js操作元素的其他操作(4个案例+效果图+代码)

1. 获取元素的位置和大小

案例:获取元素的位置和大小

1.代码

2.效果

2. 获取元素的可视区域

案例:获取元素的可视区域

1.代码

2.效果

3. 元素的滚动操作

案例:元素的滚动操作

1.代码

2.效果

4. 获取鼠标指针位置

案例:时刻获取鼠标位置

1.代码

2.效果

3.解释

案例:拖动的小球

1.代码

2.效果

3.解释

相关文章