首先先建立一个html文件，建立一个图片库
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>学习日记</title>
</head>
<body>
<h1>hello picture</h1>
<ul>
<li>
<a href="images/guitar.jpg" title="one guitar">guitar</a>
</li>
<li>
<a href="images/back.jpg" title="boy‘back">back</a>
</li>
<li>
<a href="images/hair.jpg" title="girl‘hair">hair</a>
</li>
<li>
<a href="images/beautiful.jpg" title="a beautiful girl">beautiful</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
</body>
</html>
然后写一个函数，用来更换图片，查看图片时，浏览器默认的默认查看行为是在一个新的窗口打开这张图片，而我们的目的是在一个页面实现对图片的更换，所以我们要取消这种默认行为。
代码更改如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>学习日记</title>
</head>
<body>
<h1>hello picture</h1>
<ul>
<li>
<a href="images/guitar.jpg" title="one guitar" onclick="showpic(this);return false">guitar</a>
</li>
<li>
<a href="images/back.jpg" title="boy‘back" onclick="showpic(this);return false">back</a>
</li>
<li>
<a href="images/hair.jpg" title="girl‘hair" onclick="showpic(this);return false">hair</a>
</li>
<li>
<a href="images/beautiful.jpg" title="a beautiful girl" onclick="showpic(this);return false">beautiful</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<script>
function showpic(whichpic){
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
</script>
</body>
</html>
这样即实现了查看图片在同一个页面。
界限来介绍几种常用的属性
1.nodeValue属性：它用来得到或者设置一个节点的值
2.childNodes属性：用来获取一个元素的所有子元素
3.nodeType属性：
元素节点的nodeType属性值是1
属性节点的nodeType属性值是2
文本节点的nodeType属性值是3
4.firstChild属性：相当于childNodes[0]
5.lastChild属性：相当于childNodes[chlidNodes.length-1]
接下来我们运用以上属性来获取图片的描述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>学习日记</title>
<style type="text/css">
body{
font-family:"Helvetica","Arial",serif;
color:#333;
background-color:#ccc;
margin:1em 10%;
}
h1{
color:#333;
background-color:transparent;
}
a{
color:#c60;
background-color:transparent;
font-weight:bold;
text-decoration:none;
}
ul{
padding:0;
}
li{
float:left;
padding:1em;
list-style:none;
}
img{
display:block;
clear:both;
}
</style>
</head>
<body>
<h1>hello picture</h1>
<ul>
<li>
<a href="images/guitar.jpg" title="one guitar" onclick="showpic(this);return false">guitar</a>
</li>
<li>
<a href="images/back.jpg" title="boy‘back" onclick="showpic(this);return false">back</a>
</li>
<li>
<a href="images/hair.jpg" title="girl‘hair" onclick="showpic(this);return false">hair</a>
</li>
<li>
<a href="images/beautiful.jpg" title="a beautiful girl" onclick="showpic(this);return false">beautiful</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="discription">选择一张图片</p>
<script>
function showpic(whichpic){
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text=whichpic.getAttribute("title");
var discription=document.getElementById("discription");
discription.firstChild.nodeValue=text;
}
</script>
</body>
</html>
为其添加样式，并获取到了图片的详细信息。图片的详细信息就是li元素的title属性，p元素的
firstChild值为“选择一张图片”，是一个文本节点。
时间： 2024-10-09 22:14:42