学习 JavaScript DOM 编程艺术 图片库例子1.1 加上描述

运行效果:

给每一个图片加了title

随便点一个图片

和图片一起显示出来描述信息

html:

图片库

• 图片1

• 图片2

• 图片3

• 图片4

• 图片5

• 图片6

选择图片的说明文字

JS:

比原来增加三行 代码

function showpic(whichpic) {

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

// 获取 传入参数 所在元素中  href 中的属性值

var placeholder = document.getElementById("placeholder");

// 获得占位符 图片的  找到img标签

placeholder.setAttribute("src", source);

// 对于img 标签的src 的值换成 source中的值

var Text = whichpic.getAttribute("title");

// 获取 传入参数 所在元素中  title 中的属性值

var description = document.getElementById("description");

// 找到 p 标签

    description.firstChild.nodeValue = Text;

    //设置P 标签的属性值

}