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+"\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>

巴特西

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

最新文章

热门文章