设为首页收藏本站
开启辅助访问 切换到宽版
快捷导航 发布信息
搜索
自丢网»社区论坛 › 建站程序/IT教程 › JavaScript教程 › javascript点击按钮切换图片案例教程（附代码） ...

javascript点击按钮切换图片案例教程（附代码）

[复制链接]
查看2859 | 回复0 | 2020-2-9 08:28 | 显示全部楼层 |阅读模式
javascript点击按钮切换图片案例教程，下面我们看下代码案例：
  1. <body>
  2.     <button id='ldh'>刘德华</button><button id='zxy'>张学友</button><br>
  3.     <img src="images/ldh.jpg" alt="刘德华" title="刘德华">
  4.     <script>
  5.         var ldh = document.getElementById('ldh');
  6.         var zxy = document.getElementById('zxy');
  7.         var imgs = document.querySelector('img');
  8.         zxy.onclick = function() {
  9.             imgs.src = 'images/zxy.jpg';
  10.             imgs.alt = '张学友';
  11.             imgs.title = '张学友';
  12.         }
  13.         ldh.onclick = function() {
  14.             imgs.src = 'images/ldh.jpg';
  15.             imgs.alt = '刘德华';
  16.             imgs.title = '刘德华';
  17.         }
  18.     </script>
  19. </body>
复制代码

js教程, javascript教程, DOM教程

相关帖子
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

admin

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-4-16
回复楼主 返回列表