<!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實現點擊圖片切換為另一圖片，再次點擊恢復到原圖片
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。