华恩JAVA班第53天
访问节点属性的值：
<!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>使用getAttribute读取节点的属性值</title> <style type="text/css"> img{ border: 0px; float: left; padding:3px; } body{ margin:0px; font-size:12px; line-height:20px; } input{ margin-top: 5px; } </style> <script type="text/javascript"> function hh(){ var hText=document.getElementByIdx_x_x("fruit").getAttribute("src"); alert("图片的路径是："+hText) } function check(){ var favor=document.getElementsByName("enjoy"); var like="你喜欢的水果是："; for(var i=0;i<favor.length;i++){ if(favor[i].checked==true){ like+="\n"+favor[i].getAttribute("value"); } } alert(like); } function change(){ var imgs=document.getElementsByTagName_r("img"); imgs[0].setAttribute("src","images/grape.jpg"); } </script> </head>
<body> <img src="images/fruit.jpg" alt="水果图片" id="fruit" /> <h1 id="love">选择你喜欢的水果：</h1> <input name="enjoy" type="checkbox" value="apple" />苹果 <input name="enjoy" type="checkbox" value="banana" />香蕉 <input name="enjoy" type="checkbox" value="grape" />葡萄 <input name="enjoy" type="checkbox" value="pear" />梨 <input name="enjoy" type="checkbox" value="watermelon" />西瓜 <br /> <input name="btn" type="button" value="显示图片路径" οnclick="hh()" /> <br /><input name="btn" type="button" value="喜欢的水果" οnclick="check()" /> <br /><input name="btn" type="button" value="改变图片" οnclick="change()" /> </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> <script type="text/javascript"> function change(){ var imgs=document.getElementByIdx_x_x("s1"); imgs.src="images/grape.jpg"; } function show(){ var hText=document.getElementByIdx_x_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_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_x("myTable").rows[0]; uRow.className="title"; }
function delRow(){ document.getElementByIdx_x_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>
更多信息可以参见同学富晓磊的博客:http://blog.sina.com.cn/u/1798827371
