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

Posted 2020-09-02 monica123456

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

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

1，在清单后添加占位符

<img id="placeholder" src="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="img/001.jpg" onclick="showPic(this);return false;" title="">Rose</a></li>

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