js笔记（5）
選項卡之。。。。。。。。。。。。。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>選項卡的優化之合并函數</title> <style>#div1{width: 200px;height: 200px;background: red;} </style> <script>function setText(){var oTxt = document.getElementById('txt1');//第一種操作屬性的方法//oTxt.value = 'aflkdjfa';//第二種操作屬性的方法oTxt['value'] = 'afdfsasdf';} </script> </head> <body><input id="txt1" type="text" /> <input type="button" value="改變文字" οnclick="setText()" /> </body> </html> ---------------------------------------------------------------------------------------- <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>選項卡的優化之合并函數</title> <style>#div1{width: 200px;height: 200px;background: red;} </style> <script>function setStyle(name,value){var oDiv = document.getElementById('div1');oDiv.style[name] = value;} </script> </head> <body> <input type="button" value="變寬" οnclick="setStyle('width','400px')" /> <input type="button" value="變高" οnclick="setStyle('height','400px')" /> <input type="button" value="變綠" οnclick="setStyle('background','green')" /> <div id="div1"></div> </body> </html> ------------------------------------------------------------------------------------ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>選項卡的優化之合并函數</title> <style>div{width: 200px;height: 200px;float: left;border: 1px solid black;margin: 10px;} </style> <script>window.onload = function (){var aDiv = document.getElementsByTagName('div');for(var i = 0;i < aDiv.length;i ++)aDiv[i].style.background = 'red';} </script> </head> <body><div></div> <div></div> <div></div> <div></div></body> </html> ------------------------------------------------------------------------------- <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>選項卡的優化之合并函數--全選，不選，反選</title><script>window.onload = function (){var oBtn1 = document.getElementById('btn1');var oBtn2 = document.getElementById('btn2');var oBtn3 = document.getElementById('btn3');var oDiv = document.getElementById('div1');var aCh = oDiv.getElementsByTagName('input');oBtn1.onclick = function() {//全選for (var i = 0; i < aCh.length; i++) {aCh[i].checked = true;}};oBtn2.onclick = function() {//不選for (var i = 0; i < aCh.length; i++) {aCh[i].checked = false;}};oBtn3.onclick = function() {//反選for (var i = 0; i < aCh.length; i++) {if (aCh[i].checked) {aCh[i].checked = false;}else{aCh[i].checked = true;}}};}; </script> </head> <body><input id="btn1" type="button" value="全選" /><br> <input id="btn2" type="button" value="不選" /><br> <input id="btn3" type="button" value="反選" /><br> <div id="div1"><input type="checkbox" /><br><input type="checkbox" /><br><input type="checkbox" /><br><input type="checkbox" /><br><input type="checkbox" /><br><input type="checkbox" /><br><input type="checkbox" /><br><input type="checkbox" /><br><input type="checkbox" /><br><input type="checkbox" /><br><input type="checkbox" /><br> </div></body> </html>總結
- 上一篇： 阿里6年，我的技术蜕变之路！
- 下一篇： js笔记（6）