DOM操作

1号全栈玩家

已于 2024-05-09 10:48:30 修改

阅读量134

点赞数 2

分类专栏： java0到1 文章标签： java 开发语言

于 2024-04-17 11:47:42 首次发布

本文链接：https://blog.csdn.net/weixin_71942139/article/details/137866327

版权

java0到1 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

dom操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            width: 120px;
            height: 40px;
        }
        .text1{
            width: 250px;
        }
    </style>
</head>
<body>
    <img src="./image/turnoff.png" alt="" class="lamp">
    
    <br><br>

    <input type="button" value="关灯" onclick="off()">
    <input type="button" value="开灯" onclick="on()">

    <br><br>

    <input type="text" value="ABCD" onfocus="lower()" onblur="upper()" class="text1">
    <br><br>

    <input type="checkbox" name="hobby" ><font style="font-size: 45px;"> 游戏 </font>
    <input type="checkbox" name="hobby" ><font style="font-size: 45px;"> 旅游 </font>
    <input type="checkbox" name="hobby" ><font style="font-size: 45px;"> 学习 </font>

    <br><br>
    
    <input type="button" value="全选" onclick="checkall()">
    <input type="button" value="反选" onclick="checkdel()">


<script>
    function on(){
        var img = document.querySelector(".lamp");
        img.src = "image/turnon.png";
        
    }

    function off(){
        var img = document.querySelector(".lamp");
        img.src = "image/turnoff.png";
    }

    function lower(){
        var text1 = document.querySelector(".text1");
        text1.value = text1.value.toLowerCase();
    }

    function upper(){
        var text1 = document.querySelector(".text1");
        text1.value = text1.value.toUpperCase();
    }

    function checkall(){

        var hobbys = document.getElementsByName("hobby");

        for(let i = 0;i < hobbys.length;i++){
            const  element = hobbys[i];
            element.checked = true;
        }
    }

    function checkdel(){

        var hobbys = document.getElementsByName("hobby");

        for(let i = 0;i < hobbys.length;i++){
            const  element = hobbys[i];
            if (element.checked == true){
                element.checked = false;
            }else{
                element.checked = true;
            }
            
        }
    }


</script>

</body>
</html>