JavaScript DOM操作案例点击按钮显示图片

Stella981

2021-10-11 19:32 • 阅读 894

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <input type="button" value="点击显示图片" id="bt"/>
 9 <img src="" alt="" id="im"/>
10 <script>
11     //点击显示图片
12 
13     //根据id获取按钮
14     var btObject = document.getElementById("bt");
15     //为按钮注册点击事件,添加事件处理函数
16     btObject.onclick = function () {
17         //根据id获取图片标签,设置图片的src属性值
18         var imObject = document.getElementById("im");
19         imObject.src = "images/liuyan.jpg";
20         //设置图片大小
21         imObject.width = "300";
22         imObject.height = "400";
23     };
24 </script>
25 </body>
26 </html>