JavaScript-DOM事件简单学习

最新推荐文章于 2023-01-08 22:10:52 发布

立乱来

最新推荐文章于 2023-01-08 22:10:52 发布

阅读量100

点赞数

分类专栏： web 笔记 html 文章标签： javascript 前端 dom操作

本文链接：https://blog.csdn.net/qq_42107431/article/details/121055492

版权

笔记同时被 3 个专栏收录

81 篇文章 1 订阅

订阅专栏

web

30 篇文章 0 订阅

订阅专栏

html

9 篇文章 0 订阅

订阅专栏

JavaScript-DOM事件简单学习

DOM简单学习

功能：控制html文档的内容
代码：获取页面标签(元素)对象 Element
- document.getElementById(“id值”);通过元素的id值来获取元素对象
操作Element对象：
1. 设置其属性值：
  1. 明确获取的对象是哪一个
  2. 查看API文档，找其中有哪些属性可以设置
2. 修改标签体内容：
  - 属性：innerHTML
    1. 获取元素对象
    2. 使用innerHTML属性修改标签体内容

事件简单学习

功能：某些组件被执行了某些操作后，触发了某些代码的执行。
如何绑定事件
1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
  1. 事件：onclick–单击事件
2. 通过js获取元素对象，指定事件属性，设置一个函数

CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点灯开关</title>
</head>
<body>
<img id="tu" src="../image/lvugkl.png" width="500">

<script>
    /**
     * 分析：
     *     1. 获取图片对象
     *     2. 绑定单击事件
     *     3. 每次单击切换图片
     *          规则：
     *              如果灯是开的 on，切换图片为off
     *              如果灯是关的 off，切换图片为on
     *          使用一个标记flag来完成
     */
    var f=false;

    //1. 获取对象
    var obj = document.getElementById("tu");

    //2. 绑定单击事件
    obj.onclick=function () {
        if (f){
            obj.src="../image/lvugkl.png";f=false;
        }else {
            obj.src = "../image/lvugkl.jpg";
            f = true;
        }
    };
</script>

</body>
</html>

立乱来

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript-DOM事件简单学习

JavaScript-DOM简单学习DOM简单学习功能：控制html文档的内容代码：获取页面标签(元素)对象 Elementdocument.getElementById(“id值”);通过元素的id值来获取元素对象操作Element对象：设置其属性值：明确获取的对象是哪一个查看API文档，找其中有哪些属性可以设置修改标签体内容：属性：innerHTML获取元素对象使用innerHTML属性修改标签体内容事件简单学习功能：某些组件被执行了某些操
复制链接

扫一扫