js操作页面三步骤

最新推荐文章于 2023-11-22 22:01:47 发布

编程世界-云

最新推荐文章于 2023-11-22 22:01:47 发布

阅读量281

点赞数

文章标签： javascript html web js css

本文链接：https://blog.csdn.net/weixin_45761317/article/details/103723237

版权

本文详细介绍了JavaScript操作页面的三个主要步骤：事件处理、内容操控和样式修改。涵盖鼠标、文档、键盘、表单等各类事件，以及页面转跳、处理滚动条宽度的实用技巧，是web开发者的必备知识。

摘要由CSDN通过智能技术生成

js操作页面三步骤

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>操作页面的三步骤</title>
</head>
<body>
    <h1>操作页面的三步骤</h1>
    <div class="box">
        <h1>box h1</h1>
    </div>
</body>
<script>
    // 1、获取页面标签
    // 2、设置操作的激活条件 - 事件
    // 3、具体的操作方式 - 内容 | 样式 | 事件 | 文档结构

    // 1
    let body = document.querySelector('body');
    let box = document.querySelector('.box');
    // 父级调用选择器方法，只完成自己内部的检索
    let body_h1 = body.querySelector('h1');
    console.log(body_h1);
    let box_h1 = box.querySelector('h1');
    console.log(box_h1);

    // 2
    body_h1.onclick = function () {
        // console.log('你丫点我了')
        // 3
        if (box_h1.style.color != 'red') {
            box_h1.style.color = 'red';
            box_h1.style.backgroundColor = 'orange';
        } else {
            box_h1.style.color = 'black';
            box_h1.style.backgroundColor = 'white';
        }
    }
</script>
</html>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

js事件

鼠标事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠标事件</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    let box = document.querySelector('.box');
    // 单击
    box.onclick = function () {
        console.log('单击了', this)
    };
    // 双击
    box.ondblclick = function () {
        console.log('双击了')
    };
    // 右键
    box.oncontextmenu = function () {
        console.log('右键了');
        // 有些事件有系统默认动作，取消默认动作可以返回 false
        return false;
    };
    // 悬浮
    box.onmouseover = function () {
        console.log('悬浮了');
    };
    // 移开
    box.onmouseout = function () {
        console.log('移开了');
    };
    // 移动
    box.onmousemove = function () {
        console.log('移动了');
    };
    // 按下
    box.onmousedown = function () {
        console.log('按下了');
    };
    // 抬起
    box.onmouseup = function () {
        console.log('抬起了');
    };
</script>
</html>

文档事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <titl

最低0.47元/天解锁文章

编程世界-云

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js操作页面三步骤

js操作页面三步骤<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>操作页面的三步骤</title></head><body> <h1>操作页面的三步骤</h1> <...
复制链接

扫一扫