第五次作业-CSDN博客

本文链接：https://blog.csdn.net/2301_80950331/article/details/134900390

本文通过HTML和JavaScript代码展示了如何操作DOM元素，包括修改图像源、文本转换以及处理复选框的状态，涉及事件监听和全局函数应用。

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initialscale=1.0">
        <title>JS-对象-DOM-案例</title>
    </head>
    <body>
        <img id="h1" src="img/off.gif"> <br><br>
        <div class="cls">武汉科技大学</div> <br>
        <div class="cls">信息管理系</div> <br>
        <input type="checkbox" name="hobby"> 网页设计
        <input type="checkbox" name="hobby"> java程序设计
        <input type="checkbox" name="hobby"> 数据结构
        <img id="light" src="img/off.gif"> <br>
        <input type="button" value="点亮 " onclick="on()">
        <input type="button" value="熄灭 " onclick="off()">
        <br> <br>
        <input type="text" id="name" value="ITCAST" onfocus="lower()"
        onblur="upper()">

        <br> <br>
        <input type="checkbox" name="hobby"> 电影
        <input type="checkbox" name="hobby"> 旅游
        <input type="checkbox" name="hobby"> 游戏
        <br>
        <input type="button" value="全选 " onclick="checkAll()">
        <input type="button" value="反选 " onclick="reverse()">
    </body>
    <script>
        var img = document.getElementById ('h1');
        img.src = "img/on.gif";
        var divs = document.getElementsByTagName ( 'div');
        for (let i = 0; i < divs.length; i++) 
        {
            const div = divs [i];
            div.innerHTML += "<font color='red'>very good</font>";
        }
        var ins = document.getElementsByName ( 'hobby');
        for (let i = 0; i < ins.length; i++) {
            const check = ins [i];
            check.checked = true;
        }
        function on (){
            var img = document.getElementById ("light");
            img.src = "img/on.gif"; 35
        }
        function off (){
             var img = document.getElementById ("light");
             img.src = "img/off.gif"; 43
            }
            function lower(){
                var input = document.getElementById ("name");
                input.value = input.value.toLowerCase (); 52
            }
            function upper(){
                var input = document.getElementById ("name");
                input.value = input.value.toUpperCase ()
            }
            function checkAll (){
                var hobbys = document.getElementsByName ("hobby");
                for (let i = 0; i < hobbys.length; i++) {
                const element = hobbys [i];
                element.checked = true; 71
            } 
        }
        function reverse (){
            var hobbys = document.getElementsByName ("hobby");
            for (let i = 0; i < hobbys.length; i++) {
                const element = hobbys [i];
                element.checked = false; 82
            }
        }
    </script>
</html>