首页 > 代码库 > JavaScript函数的调用(通过节点)--JavaScript DOM编程艺术

JavaScript函数的调用(通过节点)--JavaScript DOM编程艺术

问题:点击某个图片链接时,可以在当前网页同时看到图片以及原有的图片清单

解决:增加一个“占位符”为图片预留一个浏览区域

1,在清单后添加占位符

<img id="placeholder" src="http://www.mamicode.com/img/001.jpg" alt="my image">

2,改变占位符的src属性

function showPic(whichpic){var placeholder=document.getElementById("placeholder");//通过ID属性获取img元素的内容  

var source=whichpic.getAttrribute("src");//获取点击的图片链接的src属性的值

placeholder.setAttribute("src",source);//修改img元素的src属性为当前点击的图片链接

}

3,在图片清单在调用函数

<li><a href="http://www.mamicode.com/img/001.jpg" onclick="showPic(this);return false;" title="">Rose</a></li>

说明:this表示这个<a>元素节点  、return false表示JS代码返回给onclick事件处理函数的值是false,会认为“这个链接没有被点击”,这样点击链接时就不会被带到另外一个图片查看器去。

JavaScript函数的调用(通过节点)--JavaScript DOM编程艺术