• DOM对非表单元素与表单元素的属性操作

    本课标题：DOM对非表单元素与表单元素的属性操作

    引入话术：我们学习事件的目的就是为了方便对DOM进行操作，也就是通过事件去对DOM元素中的属性就行操作，比如单击一个按钮隐藏盒子、光标移入到盒子上盒子变色等。那我们如何结合事件去对元素进行操作呢？那我们先学对非表单元素的属性操作

    课堂内容：1）对图片的src属性操作

    2）对图片的width/height属性操作

    3）对图片的title/alt属性的操作

    4）图片的显示与隐藏

    案例演示：演示DOM对非表单元素的属性操作（历时25分钟）

    引入话术：刚才只是对表单元素属性执行了操作，我们接下来对表单元素进行操作。

    课堂内容：1）复习回顾表单及表单元素的组成、特征

    2）value属性的操作

    3）disabled/checked/selected属性的操作（重点）

    4）复习回顾按钮禁用、默认选中的三种写法并通过js实现（重点）

    案例演示：演示个人信息注册案例（历时20分钟）

    总结：对DOM操作做总结（历时5分钟）

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>对表单元素的属性操作title>
    9.   <style>
    10.     .imgB {
    11.       margin-top: 200px;
    12.     }
    13.  
    14.     .select {
    15.       width: 1000px;
    16.       height: 600px;
    17.     }
    18.  
    19.     #box {
    20.       height: 100px;
    21.       background-color: crimson;
    22.     }
    23.   style>
    24. head>
    25.  
    26. <body>
    27.   <input type="button" value="显示图片" id="show">
    28.   <input type="button" value="改变图片的尺寸" id="change">
    29.   <input type="button" value="隐藏图片" id="hide">
    30.   <div>
    31.     <img src="" alt="" id="imgBox" style="border: 10px solid black;" class="imgB">
    32.   div>
    33.   <div id="box">我是divdiv>
    34.   <p>检测图片是否占位置p>
    35. body>
    36. <script>
    37.   var showBtn = document.querySelector("#show");
    38.   var changeBtn = document.querySelector("#change");
    39.   var hideBtn = document.querySelector("#hide");
    40.   var imgBox = document.querySelector("#imgBox");
    41.   var box = document.getElementById("box");
    42.   // 显示
    43.   showBtn.onclick = function () {
    44.     imgBox.src = "images/yang.jpeg"
    45.   }
    46.   // 改变尺寸
    47.   changeBtn.onclick = function () {
    48.     //1、直接修改宽高属性
    49.     /*  imgBox.width = "1000";
    50.      imgBox.height = "600"; */
    51.     // 2、style
    52.     // imgBox.style = "width: 1000px;height: 600px;";
    53.     /* imgBox.style.width = "1000px";
    54.     imgBox.style.height = "1000px"; */
    55.     // 3。类名
    56.     imgBox.className = "select";
    57.     // CSS中用链接符的属性，在js中去掉链接符且第二个单词的首字母大写
    58.     box.style.backgroundColor = "blue";
    59.     box.style.color = "red";
    60.     box.style.fontSize = "30px";
    61.     box.style.width = "300px";
    62.     box.style.marginTop = "100px";
    63.     box.style.textAlign = "center";
    64.   }
    65.   // 隐藏
    66.   hideBtn.onclick = function () {
    67.     // imgBox.style.display = "none";
    68.     imgBox.style.visibility = "hidden";
    69.  
    70.   }
    71. script>
    72.  
    73. html>

  • 相关阅读:
    基本分段存储管理方式（分段，段表，地址转换以及与分页管理对比）
    CentOS7安装jdk
    机器学习笔记之线性分类——逻辑回归
    （二）springboot整合redis，基于注解快速实现缓存功能
    bootstrapv4轮播图去除两侧阴影及线框的方法
    【实验作业】微处理器原理与应用 CPUHomework3【子程序汇编实验 流程图 十六进制数转十进制数 键盘录入 屏幕显示 闰年判断 两位数求和 汇编小程序】
    驱动按键控制led
    25 个超棒的 Python 脚本合集
    Nacos安装讲解教程
    PostgreSQL基础入门
  • 原文地址：https://blog.csdn.net/weixin_47619284/article/details/126276683