<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { width: 300px; } </style> </head> <body> <button id="ldh">刘德华</button> <button id="zxy">张学友</button> <br> <img src="./images/zxy.jpg" alt=""> <script> // 1. 获取事件 var ldh = document.getElementById('ldh'); var zxy = document.getElementById('zxy'); var img = document.querySelector('img'); // 2. 绑定事件 + 实现功能函数 ldh.onclick = function () { // 图片的地址进行修改 img.src = './images/ldh.jpg' ; } zxy.onclick = function () { img.src = './images/zxy.jpg' ; } </script> </body> </html>
