JS学习笔记-构造一个画廊

主函数main.html

    


    
    
    
Snapshots
    

        
Fireworks 
        
Coffee
        
Rose
        
Big Ben
    

    
    

JS代码showPic.js代码

function showPic(whichpic){
    var sSource = whichpic.getAttribute("href");
    var oPlaceholder = document.getElementById("placeholder");
    oPlaceholder.setAttribute("src", sSource)
}

说下对onclick函数的理解，这个函数的返回值默认为 true，因此在这里加入return false；用以解决页面跳转

学习使用childNode方法

    
    


    
    
    
Snapshots
    

        
Fireworks 
        
Coffee
        
Rose
        
Big Ben
    

    
    
 Choose an image
    

JS代码部分

function showPic(whichpic){
    var sSource = whichpic.getAttribute("href");
    var sText = whichpic.getAttribute("title");
    var oDescription = document.getElementById("description");
    var oPlaceholder = document.getElementById("placeholder");
    oPlaceholder.setAttribute("src", sSource);
    oDescription.firstChild.nodeValue = sText;
}

CSS代码部分

body{
    font-family: "Hevetica","Arial",sans-serif;
    color: #333;
    background-color: #ccc;
    margin: 1em 10%;
}

h1{
    color: #333;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}

a{
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}

ul{
    padding: 0;
}

li{
    float: left;
    padding: 1em;
    list-style: none;
}

p{
    float: left;
}

#placeholder{
    float: left;
}

使用nodeValue获取到的是文本节点的文本值