2018.7.2 如何用js实现点击图片切换为另一图片，再次点击恢复到原图片

程序员洪昌技术 2022年11月14日

0 收藏 620 点赞 2,841 浏览 1262 个字

<!DOCTYPE html>
<html lang="zh"><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>
<script type="text/javascript">
window.onload = function(){
var fruit = document.getElementById('fruit');
//图片地址
btn1.onclick = function(){
alert(fruit.getAttribute('src'));
}//喜欢的水果
btn2.onclick =function(){
var loves = document.getElementsByName('enjoy');
//alert(loves.length);
var str = "";
for(var i in loves){
if(loves[i].checked == true){
str +=loves[i].value+"\n"
}
}
alert(str);
}
}//图片改变
function change(){
var f = document.getElementById('fruit');
if(f.getAttribute('src')=='img/grape.jpg'){
f.src="img/fruit.jpg";
}else{
f.src="img/grape.jpg";
}
}
</script></head><body>
<img src="img/fruit.jpg" alt="水果图片" id="fruit" />
<h1 id="love">选择你喜欢的水果：</h1>
<input name="enjoy" type="checkbox" value="apple" />苹果
<input name="enjoy" type="checkbox" value="banana" />香蕉
<input name="enjoy" type="checkbox" value="grape" />葡萄
<input name="enjoy" type="checkbox" value="pear" />梨
<input name="enjoy" type="checkbox" value="watermelon" />西瓜
<br />
<input name="btn" type="button" value="显示图片路径" id="btn1" />
<br /><input name="btn" type="button" value="喜欢的水果" id="btn2" />
<br /><input name="btn" type="button" value="改变图片" onclick="change()"  id="btn3"/>
</body>
</html>