JS实现动物相册_动物相册如何命名-CSDN博客

本文链接：https://blog.csdn.net/qq_46100493/article/details/110849104

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>