頁中所有的p標籤添加onclick事件和表格隔行換色以及checkbox的複選
[align=left]
display和bisibility
//当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。 document.getElementById("id").style.visibility="visible"; document.getElementById("id").style.visibility="hidden"; //display被设置为"none"的时候，元素被隐藏了，也將它原来所在的位置空出來 //display被设置为"block"的时候 和div一樣使用"塊" 而inline就相當於一個span document.getElementById("id").style.display="block"; document.getElementById("id").style.display="inline"; document.getElementById("id").style.display="none"; <p>測試1</p> <p>測試2</p> <p>測試3</p>
<script type="text/javascript"> var pitems = document.getElementsByTagName("p");//Dom方式獲取所有p標籤元素 for (var i = 0; i < pitems.length; i++) { pitems[i].onclick = function() { alert(this.innerHTML); } }</script> <table id="tb"> <tbody> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> </tr> <tr> <td>第四行第一列</td> <td>第四行第二列</td> </tr> <tr> <td>第五行第一列</td> <td>第五行第二列</td> </tr> <tr> <td>第六行第一列</td> <td>第六行第二列</td> </tr> </tbody></table>
<script type="text/javascript"> var item = document.getElementById("tb");//獲取Id為tb的元素 var tbody = item.getElementsByTagName("tbody")[0];//獲取表格的第一個tboby元素 var trs = tbody.getElementsByTagName("tr");//獲取tboby元素下的所有tr元素 for (var i = 0; i < trs.length; i++) { if (i % 2 == 0) { trs[i].style.backgroundColor = "#888"; } }</script><input type="checkbox" value="1" name="check" checked="checked"/><input type="checkbox" value="2" name="check"/><input type="checkbox" value="3" name="check" checked="checked"/><input type="checkbox" value="4" name="check"/><input type="button" value="選中的個數" id="btnchk">
<script type="text/javascript"> var btnchk = document.getElementById("btnchk");//獲取id為btnchk的button元素節點 btnchk.onclick = function() { var chkarr = new Array();//創建一個數組 var chkitems = document.getElementsByName("check");//獲取name屬性值為'check'的一組checkbox元素 //循環這組數據 for(var i=0;i<chkitems.length;i++) { //判斷是否被選中 if(chkitems[i].checked){ chkarr.push(chkitems[i].value);//將選中的checkbox的值push到數組中去 } } alert("選中的個數為："+chkarr.length); }