图片切换 · Javascript

效果图 ![](https://box.kancloud.cn/00ca8fd0461b3865f380b78045e6d99e_523x252.gif) 语法 > modern.onclick = function(){ img.src="images/现代.png"; } 代码内容 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> img{ width:300px; } </style> </head> <body> <img src="images/placeholder.png" alt="" id="show"> <button id="modern">现代</button><button id="old">古典</button> <script> var img = document.getElementById("show"); var modern = document.getElementById("modern"); var old = document.getElementById("old"); modern.onclick = function(){ img.src="images/现代.png"; } old.onclick = function(){ img.src="images/古典.png"; } </script> </body> > ```