华恩JAVA班第55天
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>使用HTML DOM对象的属性访问节点</title> <script type="text/javascript"> function change(){ var imgs=document.getElementByIdx_x("s1"); imgs.src="images/grape.jpg"; } function show(){ var hText=document.getElementByIdx_x("s1").alt; alert("图片的alt是："+hText) } </script> </head>
<body> <img src="images/fruit.jpg" id="s1" alt="水果图片" /><br /> <input name="b1" type="button" value="改变图片" οnclick="change()" /> <input name="b2" type="button" value="显示图片路径" οnclick="show()" /> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>使用HTML DOM操作表格</title> <style type="text/css"> body{ font-size:13px; line-height:25px; } table{ border-top: 1px solid #333; border-left: 1px solid #333; width:300px; } td{ border-right: 1px solid #333; border-bottom: 1px solid #333; } .center{ text-align:center; } .title{ text-align:center; font-weight:bold; background-color: #cccccc; } </style> <script type="text/javascript"> function addRow(){ var newRow=document.getElementByIdx_x("myTable").insertRow(2); var col1=newRow.insertCell(0); col1.innerHTML="幸福从天而降"; var col2=newRow.insertCell(1); col2.innerHTML="¥18.5"; col2.align="center"; } function updateRow(){ var uRow=document.getElementByIdx_x("myTable").rows[0]; uRow.className="title"; }
function delRow(){ document.getElementByIdx_x("myTable").deleteRow(1); } </script> </head>
<body> <table border="0" cellspacing="0" cellpadding="0" id="myTable"> <tr id="row1"> <td>书名</td> <td>价格</td> </tr> <tr id="row2"> <td>看得见风景的房间</td> <td class="center">¥30.00</td> </tr> <tr id="row3"> <td>60个瞬间</td> <td class="center">¥32.00</td> </tr> </table> <input name="b1" type="button" value="增加一行" οnclick="addRow()" /> <input name="b2" type="button" value="删除第2行" οnclick="delRow()"/> <input name="b3" type="button" value="修改标题" οnclick="updateRow()"/> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>改变图片</title> <style type="text/css"> img{ border: 0px; padding:3px; } body{ margin:0px; font-size:12px; line-height:25px; } input{ margin-top: 5px; } </style> <script type="text/javascript"> function change(){ var imgs=document.getElementsByTagName_r("img"); imgs[0].setAttribute("src","images/grape.jpg"); } </script> </head>
<body style="text-align:center;"> <img src="images/fruit.jpg" alt="水果图片" id="fruit" /> <br /><input name="btn" type="button" value="改变图片" οnclick="change()" /> </body> </html>
更多信息可以参见同学富晓磊的博客:http://blog.sina.com.cn/u/1798827371
