JS實現動物相簿

passerby&發表於2020-12-08
JS

JS實現動物相簿

setAttribute()用法

setAttribute() 方法建立或改變某個新屬性。
setAttribute()語法
element.setAttribute(attributename,attributevalue)
attributename表示要填入的屬性名稱，必須要填
attributevalue表示要填入的屬性值，必須要填
setAttribute()例項
document.getElementsByTagName(“href”)[0].setAttribute(“src”,“load”);

getAttribute() 用法

getAttribute() 方法通過名稱獲取屬性的值。
getAttribute() 語法
element.getAttribute(attributename)
attributename 想獲取的屬性值，必須填
getAttribute() 例項
document.getElementsByTagName(“a”)[0].getAttribute(“target”);
有了這些基礎知識後下面是程式碼
在這裡插入圖片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>動物相簿</title>
		<style>
			#imagegallery li{
				display: inline;   /*利用這個屬性可以使元素顯示為內聯元素，圖片之間不換行*/
				list-style: none;   /*設定列表樣式*/
			}
		</style>
	</head>
	<body>
		<h1>動物相簿</h1>
		<ul id="imagegallery">  <!--<ul> 標籤定義無序列表。-->
			<li> <!--<li> 標籤定義列表專案。-->
				<a href="timg1.jpg" title="我是一隻超可愛的貓咪,您確定不抱走嘛">  <!--a標籤是超連結標籤，href後面是圖片的連結-->
					<img src="./timg1.jpg" width="100" height="100" alt="小貓咪" />  <!--用width,height屬性設定圖片的寬高防止圖片大小不一不夠整齊-->
				</a>
			</li>
			<li>
				<a href="timg2.jpg" title="我說一隻可愛的小熊貓,我在玩">
					<img src="./timg2.jpg"  width="100" height="100" alt="小熊貓" />
				</a>
			</li>
			<li>
				<a href="timg3.jpg" title="主人我這麼可愛你確定不把我帶回家嘛">
					<img src="./timg3.jpg" width="100" height="100" alt="小老鼠" />
				</a>
			</li>
			<li>
				<a href="timg4.jpg" title="我今天帶了眼鏡,屬於文藝範">
					<img src="./timg4.jpg" width="100" height="100" alt="小狗狗" />
				</a>
			</li>
		</ul>
		<img id="placeholder" src="timg1.jpg" width="450" height="400" alt="動物相簿" />  <!--設定預設標籤-->
		<p id="description">選擇你喜歡的圖片</p>
		<script>
			function showPic(whichpic){  //定義showPic方法
				var source=whichpic.getAttribute("href");  //獲取圖片的路徑
				var placeholder=document.getElementById("placeholder"); //獲取元素
				placeholder.setAttribute("src",source);  //
				var text=whichpic.getAttribute("title");
				var description=document.getElementById("description");  //獲取存放p標籤的id
				description.firstChild.nodeValue=text;  
				
			}
			window.onload=function(){
				var gallery=document.getElementById("imagegallery");   //獲取ul
				var links=gallery.getElementsByTagName("a");  //獲取所有a標籤元素
				for(var i=0;i<links.length;i++){  //迴圈遍歷所有的a標籤
					links[i].onclick=function(){  //新增匿名單機事件方法
						showPic(this);  //當前事件物件
						return false;   //取消預設的跳轉
					}
				}
			}
		</script>
	</body>
</html>

相關文章