1 <!DOCTYPE html> 2 <html><!--树根--> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <title>Image Gallery</title> 8 <meta name="description" content="An interactive getting started guide for Brackets."> 9 <script type="text/javascript" src="showpic.js"></script> 10 <script type="text/javascript"> 11 //window.onload = countBodyChildren; 12 </script> 13 <link rel="stylesheet" href="css/image.css" type="text/css" media="screen"/> 14 </head> 15 <body> 16 <!--nodeType属性总共有12种属性值，其中3种具有实用价值：元素节点、属性节点、文本节点 分别是 1 2 3--> 17 18 <h1>Snapshots</h1> 19 <ul> 20 <li> 21 <a href="image/fudan.jpg" title="fudan university" onclick="showPic(this); return false;">fudan</a> 22 </li> 23 <li> 24 <a href="image/sunflower.jpg" title="sunflower" onclick="showPic(this);return false;">sunflower</a> 25 </li> 26 <li> <a href="image/waitan.jpg" title="waitan" onclick="showPic(this);return false;">waitan</a> 27 </li> 28 <li> 29 <a href="image/lijiang.jpg" title="lijiang" onclick="showPic(this);return false;">lijiang</a> 30 </li> 31 </ul> 32 <img id="placeholder" src="image/jiuzhaigou.jpeg" alt="my image gallery"/> 33 <p id="description">Choose an image.</p> 34 </body> 35 </html>
1 body { 2 font-family: "Helvetica","Arial",sans-serif; 3 color: #333; 4 background-color: #ccc; 5 margin: 1em 10%; 6 } 7 h1 { 8 color: #333; 9 background-color: transparent; 10 } 11 a { 12 color: #c60; 13 background-color: transparent; 14 font-weight: bold; 15 text-decoration: none; 16 } 17 ul { 18 padding: 0; 19 } 20 li { 21 float: left; 22 padding: 1em; 23 list-style: none; 24 }
1 function showPic(whichpic) { 2 var source = whichpic.getAttribute("href"); 3 var placeholder = document.getElementById("placeholder"); 4 placeholder.setAttribute("src", source); 5 var text = whichpic.getAttribute("title"); 6 var description = document.getElementById("description"); 7 //alert(description.firstChild.nodeValue); 8 description.firstChild.nodeValue = text; 9 } 10 11 function countBodyChildren(){ 12 var body_element = document.getElementsByTagName("body")[0]; 13 alert(body_element.childNodes.length); 14 alert(body_element.nodeType); 15 }
