2018.7.2 如何用js实现点击图片切换为另一图片，再次点击恢复到原图片
Posted Legend
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2018.7.2 如何用js实现点击图片切换为另一图片，再次点击恢复到原图片相关的知识，希望对你有一定的参考价值。
<!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+"
"
}
}
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>以上是关于2018.7.2 如何用js实现点击图片切换为另一图片，再次点击恢复到原图片的主要内容，如果未能解决你的问题，请参考以下文章