當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

js笔记（5）

發(fā)布時(shí)間：2025/3/16 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 js笔记（5）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

選項(xiàng)卡之。。。。。。。。。。。。。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>選項(xiàng)卡的優(yōu)化之合并函數(shù)</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>選項(xiàng)卡的優(yōu)化之合并函數(shù)</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>選項(xiàng)卡的優(yōu)化之合并函數(shù)</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>選項(xiàng)卡的優(yōu)化之合并函數(shù)--全選，不選，反選</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>

總結(jié)

以上是生活随笔為你收集整理的js笔记（5）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

笔记
js