javascript+dom 做javascript图片库

废话不多说 直接贴代码   

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JAVASCRPIT图片的处理</title>
<script type="text/javascript">
function showpic(whichpic){
var source = whichpic.getAttribute("href");
var last = document.getElementById("last");
last.setAttribute("src", source);

var text=whichpic.getAttribute("title");
var decoration=document.getElementById("decoration");
decoration.firstChild.nodeValue=text;

}
</script>
<style type="text/css">
body{margin: 0px; padding: 0px; }
a{text-decoration: none;}
li{list-style-type: none;}
.man{}
.man ul{}
.man ul li{float: left; margin-bottom: 50px;}
.man ul li a{ padding: 0 50px};
.man img{display: block; }
p{font-size: 2em;}
</style>
</head>
<body>
<div class="man">
<h1>javascript图片</h1>
<ul>
<li><a href="images/2.jpg" title="1" onclick="showpic(this); return false;">1</a></li>
<li><a href="images/3.jpg" title="2" onclick="showpic(this); return false;">2</a></li>
<li><a href="images/4.jpg" title="3" onclick="showpic(this); return false;">3</a></li>
<li><a href="images/6.jpg" title="4" onclick="showpic(this); return false;">4</a></li>
</ul>
<div style="clear:both"></div>
<img id="last" src="images/1.gif" title="5" >
<p id="decoration">目前这个值是5</p>
</div>

</body>
</html>

 

 

思路问题:1:新建一个javascript程序 ,通过getAttribute属性获取图片的路径(href)属性值

             通过document.getElementById   占位符 图片的ID,然后根据获取到得找个ID,通过setAttribute的属性来修改占位符图片的位置,从而达到修改图片的目的。就是把li a  标签里面的地址传给占位符  src属性。 从而达到效果

2: 要想修改占位图片下面的P标签里面的文本值。首先  也是通过 getAttribute来  获取 li a  属性里面的title  的值,然后根据  document.getElementById的 方式来获取p 标签的ID值,然后  根据 获取到得P标签的ID值   使用 firstChild.nodeValue的方式  把li  a 的值  付给P标签的ID  从而达到目的

 

需要注意的属性就是:

getAttribute:我们就可以利用getAttribute()方法把它的各种属性的值查询出来。getAttribute()方法不能通过document对象调用,这与我们此前介绍过的其他方法不同。我们只能通过一个元素节点对象调用它。

setAttribute:setAttribute()方法与它们有一个本质上的区别:它允许我们对属性节点的值做出修改。类似于getAttribute()方法,setAttribute()方法也是一个只能通过元素节点对象调用的函数,但setAttribute()方法需要我们向它传递两个参数:

firstChild.nodeValue:

假设我们已经有一个dom对象,其内容如
内容

在javascript中,我们为了获得title的标签和文本,一般需要这样做
var title =dom.getElementsByTagName(”title”);
alert(title[0].nodeName);//得到“title”
alert(title[0].nodeValue)的时候,FF只能获得#text,而IE只能得到null
后来查了很多资料,object text类型或者object element,本身也是一个结点
上例中“标题”不是一个简单的文本内容,而是一个文本结点
它也有自己的nodeName,只是不该也不会用到
所以应该写成:
alert(title[0].firstChild.nodeValue);//得到“标题”

另一方面,反过来想,生成一个文本的时候,也是用create_text_node方法
还使用了append_child把它添加在一个父结点下
说明它其实是一个结点,需要多使用一次firstChild 

 

你可能感兴趣的:(JavaScript)