给标签、类增删改元素

最新推荐文章于 2024-11-14 10:56:19 发布

WARBEACON

最新推荐文章于 2024-11-14 10:56:19 发布

阅读量870

点赞数

本文链接：https://blog.csdn.net/WARBEACON/article/details/123580089

版权

JavaScript DOM操作图片切换动态表格事件监听

关键词由CSDN通过智能技术生成

<body>
       
       <div >
           <input type="radio" name="work" οnclick="zhanshi()"/>战士
           <input type="radio" name="work" οnclick="fashi()" />法师<br />
           <img id="zhiye" />
       </div><br />
       <button οnclick="addImg()">添加图片</button>
       <button οnclick="removeImg()">删除图片</button>
       <div id="image"></div>
       <script type="text/javascript">
           function addImg(){
               var divEle=document.getElementById("image")//引用id为image的标签
               var img =document.createElement("img")//添加img元素，此时为游离状态
               img.setAttribute("src","img/fashi.jpg")//设置属性
               imgHeightAndWidth(img)
               divEle.appendChild(img)//拼接标签
           }

           function zhanshi(){
               var imgEle = document.getElementById("zhiye"); //引用id为zhiye的标签
               imgEle.setAttribute("src","img/zhanshi.jpeg");//给这个标签添加src属性
               imgHeightAndWidth(imgEle)//引用设置imgEle标签的高宽
           }
           function fashi(){
               var imgEle = document.getElementById("zhiye");
               imgEle.setAttribute("src","img/fashi.jpg");
               imgHeightAndWidth(imgEle)
           }
           function imgHeightAndWidth(imgEle){
               imgEle.setAttribute("width","300px");
               imgEle.setAttribute("height","300px");
           }

           function removeImg(){   //节点不能自杀，要先找到其父元素，再通过父元素删除子元素
               var divEle=document.getElementById("image")//找到id为image的标签
               var par = divEle.parentElement//divEle的父元素声明为par
               par.removeChild(divEle)//删除了id为image的子标签
               //divEle.parentElement.removeChild(divEle) 效果一样


           }

       </script>

   </body>

           function allIn(){
               var hobby =document.getElementsByClassName("hobby")//得到的是一个数组
               for (var i = 0; i < hobby.length; i++) {
                   hobby[i].checked=true //checked 的属性值
               }
           }
           function allPass(){
               var hobby =document.getElementsByClassName("hobby")//得到的是一个数组
               for (var i = 0; i < hobby.length; i++) {
                   hobby[i].checked=false //checked 的属性值
               }
           }

<body>
   
       输入行<input id="hang"/><br />
       输入列<input id="lie"/><br />
       <button οnclick="creatTable()">确认</button>
       <div id="table"></div>


       <script type="text/javascript">
           function creatTable(){
               var hang = document.getElementById("hang").value//得到的是字符串
               var lie=document.getElementById("lie").value//得到的是字符串

               var biaoge =document.createElement("table")       //新建一个表格元素
               biaoge.setAttribute("border","1px")     //设置表格元素的属性
               biaoge.setAttribute("width","300px")
               biaoge.setAttribute("height","100px")

               for (var i = 0; i < hang; i++) {
                   var tr=document.createElement("tr");//按照输入数字创建行
                   for (var k = 0; k < lie; k++) {
                       var td=document.createElement("td") ;//按照输入数字创建列
                       tr.appendChild(td)//拼接单元格到行
                   }
                   biaoge.appendChild(tr) //并且拼接到表格
               }

               var divele =document.getElementById("table")
               divele.appendChild(biaoge)
           }