DOM设置属性值setAttribute()

《码赛客》

已于 2022-03-19 01:59:44 修改

阅读量1.1k

点赞数

文章标签： java

于 2022-03-19 01:48:41 首次发布

本文链接：https://blog.csdn.net/m0_49249339/article/details/123588005

版权

!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>                                                                                                                                                      <div>
       <input type="radio" name="game" οnclick="chengyaojin()"/>程咬金
       <input type="radio" name="game" οnclick="wuzetian()"/>武则天
       <br />
       
       <img id="wangzhe" />
       </div>
       <script>
           function chengyaojin(){
               //获取是一个标签绑定并利用setAttribute为其节点设置属性和值
               var imgEle = document.getElementById("wangzhe");
               imgEle.setAttribute("src","img/chengyaojin.jpg");
               imgEle.setAttribute("width","500");
               imgEle.setAttribute("height","800px")
           }

           function wuzetian(){
               //获取是一个标签并绑定为其节点设置属性和值
               var imgEle = document.getElementById("wangzhe");
               imgEle.setAttribute("src","img/wuzetian.jpg");
               imgEle.setAttribute("width","500");
               imgEle.setAttribute("height","800px")
   }

// 以下再次优化           function chengyaojin(){
               //获取是一个标签并绑定为其设置节点和属性
               var imgEle = document.getElementById("wangzhe");
               imgEle.setAttribute("src","img/chengyaojin.jpg");
               /*imgEle.setAttribute("width","500"); 进行
               imgEle.setAttribute("height","800px") 优化*/
               setWidth(imgEle)//加入
           }

           function wuzetian(){
               //获取是一个标签并绑定为其设置节点和属性
               var imgEle = document.getElementById("wangzhe");
               imgEle.setAttribute("src","img/wuzetian.jpg");
               /*imgEle.setAttribute("width","500"); 进行
               imgEle.setAttribute("height","800px") 优化*/
               setWidth(imgEle)//加入
           }
           function setWidth(imgEle){
               imgEle.setAttribute("width","500");
               imgEle.setAttribute("height","800px")
           }

<div>

          <button οnclick="addImg()">添加图片</button>
          <div id="imge"></div>
   </div>
       <script> //这种是并列添加图片
           function addImg(){
               //注意不管是添加元素还是删除元素，都要通过符元素来进行操作
               var divEle = document.getElementById("imge");
               //创建图片标签
               var img =document.createElement("img");//创建一个标签
               //设置标签的属性
               img.setAttribute("src","img/wangzhe。jpg.jpg");

               //为父元素添加一个节点
               divEle.appendChild(img);
           } //每添加一次多一个div图片标签

《码赛客》

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM设置属性值setAttribute()

<div> <input type="radio" name="game" onclick="chengyaojin()"/>程咬金 <input type="radio" name="game" onclick="wuzetian()"/>武则天 <br /> <!--<img src="img/chengyaojin.jpg" width="500px" height="800px...
复制链接

扫一扫