2024/02/11

今天根据黑马的视频来完成一些小练习

用js来：

1.切换图片

2.在文本后添加文字

3.使所有的复选框被选中

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
  <title>JSP - Hello World</title>
</head>
<body>
<h1><%= "Hello World!" %></h1>
  <img id="h1" src="img/image.png" style="font-size: 100px"><br><br>
  <div class="cls">java </div>
  <div class="cls">web </div>
  <input type="checkbox" name="hobby">hello
  <input type="checkbox" name="hobby">你好
  <input type="checkbox" name="hobby">bye
  <input type="checkbox" name="hobby">再见
<script>
  //修改图片src属性值来修改图片
      var img=document.getElementById("h1");
      img.src="img/image1.png";

//通过标签名来获取标签并修改标签内文本的属性
      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>";
     }
       //checked可以调整复选框的元素是否被选中
   var ins=document.getElementsByName("hobby");
       for(let i=0;i<ins.length;i++)
       {
         const  check=ins[i];
         check.checked=true;
       }
</script>
</body>
</html>

 

posted @ 2024-02-12 02:56  伐木工熊大  阅读(2)  评论(0)  编辑  收藏  举报