js笔记（5）

来源：互联网发布：网红的淘宝杂货铺编辑：程序博客网时间：2024/05/21 08:42
选项卡之。。。。。。。。。。。。。
<!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="改变文字" onclick="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="变宽" onclick="setStyle('width','400px')" /><input type="button" value="变高" onclick="setStyle('height','400px')" /><input type="button" value="变绿" onclick="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>
0 0