JS图片库

标记

需求效果：

网页中的图片链接显示在网页中的图片框内部而不是打开新的页面

//html部分

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<script type="text/jscript" src="../js/2019_9_14.js"></script>

	</head>

	<body>

		<ul>

			<li>

				<a href="../img/001.jpg" title="A001" onclick="showPic(this);return false;">001</a>

			</li>

			<li>

				<a href="../img/002.jpg" title="A002" onclick="showPic(this);return false;">002</a>

			</li>

			<li>

				<a href="../img/003.jpg" title="A003" onclick="showPic(this);return false;">003</a>

			</li>

			<li>

				<a href="../img/004.jpg" title="A004" onclick="showPic(this);return false;">004</a>

			</li>

		</ul>

		<img id="img1" src="../img/x.jpg" alt="my image gallery" />

	</body>

</html>

//js部分

function showPic(whichpic){

	var source = whichpic.getAttribute("href");

	var a = document.getElementById("img1");

	a.setAttribute("src",source);

}

childNodes

用于获取一个元素的所有子元素

nodeType

获取节点的type属性

nodeValue

获取节点的属性值

firstChild 和 lastChile 属性

用于提取元素列表的第一个元素和最后一个元素

巴特西

JS笔记03

JS图片库

标记

childNodes

nodeType

nodeValue

firstChild 和 lastChile 属性

最新文章

热门文章