<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0px auto; padding: 0px; } .box{ width: 1000px; height: 100px; border: 1px solid red; line-height: 100px; text-align: center; } .box1{ width: 500px; height: 200px; border: 1px solid red; background-color: cadetblue; line-height: 100px; text-align: center; } .box2{ width: 100px; height: 50px; border: 1px solid red; border-radius: 5px; background-color: burlywood; float: left; margin-top: 25px; margin-left: 25px; transition: 1s; } .box3{ width: 50px; height: 50px; border: 1px solid red; background-color: cadetblue; float: left; border-radius: 10px; margin-top: 25px; margin-left: 25px; transition: 1s; } /*.box4{ width: 50px; height: 50px; border: 1px solid red; background-color: burlywood; float: left; border-radius: 25px; margin-top: 25px; margin-left: 25px; }*/ </style> </head> <body> <div class="box"> <button οnclick="dianji('blue')">背景变蓝</button> <button οnclick="dianji('green')">背景变绿</button> <button οnclick="dianji('yellow')">背景变黄</button> <button οnclick="dianji('')">恢复原样</button> </div> <div class="box"> <button οnclick="dianjia('width','500px')">背景变窄</button> <button οnclick="dianjia('background-color','green')">背景变绿</button> <button οnclick="dianjia('height','200px')">背景变宽</button> <button οnclick="dianjia()">恢复原样</button> </div> <div class="box"> <input type="" name="" id="" value="这是原来的文字" /> <button οnclick="dianjib('value','这是改变后的文字')">改变文字</button> <button οnclick="dianjib('title','这是title')">添加title属性</button> </div> <div class="box"> <button οnclick="dianjic('box1')">变色、变高、变窄</button> <button οnclick="dianjic('box')">恢复原样</button> </div> <div class="box"> <button οnclick="dianjid()">循环出现提示框五次</button> </div> <div class="box"> <button οnclick="dianjie('background-color','cadetblue')">批量修改样式</button> <div class="box2" name ="1" ></div> <div class="box2" name ="1" ></div> <div class="box2" name ="1" ></div> <div class="box2" name ="1" ></div> <div class="box2" name ="1" ></div> </div> <div class="box"> <button οnclick="dianjif('burlywood','100px')">批量修改样式</button> <div class="box3" name ="1" ></div> <div class="box3" name ="1" ></div> <div class="box3" name ="1" ></div> <div class="box3" name ="1" ></div> <div class="box3" name ="1" ></div> </div> <div class="box"> <input type="checkbox" name="" id="" value="" class="check"/> <input type="checkbox" name="" id="" value="" class="check"/> <input type="checkbox" name="" id="" value="" class="check"/> <input type="checkbox" name="" id="" value="" class="check"/> <input type="checkbox" name="" id="" value="" class="check"/> <input type="checkbox" name="" id="" value="" class="check"/> <button οnclick="dianjig('quanxuan')">全选</button> <button οnclick="dianjig('fanxuan')">反选</button> <button οnclick="dianjig('buxuan')">全都不选</button> </div> </body></html><script type="text/javascript"> function dianji(color){ var sj1 = document.getElementsByTagName("div")[0]; sj1.style.backgroundColor = color; } function dianjia(x,y){ var sj2 = document.getElementsByTagName("div")[1]; sj2.style[x] = y; } function dianjib(name,room){ var sj3 = document.getElementsByTagName("input")[0]; sj3.setAttribute(name,room); } function dianjic(name){ var sj4 = document.getElementsByTagName("div")[3]; sj4.setAttribute("class",name); } function dianjid(){ for (var i = 1;i <= 5;i++) { alert("这是第"+ i +"次弹出"); } } function dianjie(x,y){ for(var i = 0;i < document.getElementsByClassName("box2").length + i;i++){ var box = document.getElementsByClassName("box2"); box[0].setAttribute("class","box3"); } }// 每次循环把box2的第0项改变为box3,下次循环时,上次循环中的box2第1项变为这次循环中box2的第0项,同时长度lenggth减1 function dianjif(x,y){ var moren = document.getElementsByName("1")[0].getAttribute("class"); if( moren == "box3"){ for(var i = 0;i < document.getElementsByClassName("box3").length + i;i++){ var boxa = document.getElementsByClassName("box3"); boxa[0].setAttribute("class","box2"); } }else { for(var i = 0;i < document.getElementsByClassName("box2").length + i;i++){ var box = document.getElementsByClassName("box2"); box[0].setAttribute("class","box3"); } }// var sj5 = document.getElementsByClassName("box3");// if (sj5[0].getAttribute("name") == "1") { // for (var i = 0;i < sj5.length;i++) { // sj5[i].style.backgroundColor = x;// sj5[i].style.width = y;// sj5[i].setAttribute("name","2");// }// } else{ // for (var i = 0;i < sj5.length;i++) { // sj5[i].style.backgroundColor = "cadetblue";// sj5[i].style.width = "50px";// sj5[i].setAttribute("name","1");// }// } } function dianjig(xuanbuxuan){ var zhuangtai = document.getElementsByClassName("check"); if (xuanbuxuan == "quanxuan") { for(var i = 0;i < zhuangtai.length;i++){ zhuangtai[i].checked = true; } } else if(xuanbuxuan == "buxuan"){ for(var i = 0;i < zhuangtai.length;i++){ zhuangtai[i].checked = false; } } else{ for(var i = 0;i < zhuangtai.length;i++){ var djzt = zhuangtai[i].getAttribute("checked");（（（zhuangtai[i].checked = zhuangtai[i].checked? false:true;）））（这是最简洁的方法）
（（（zhuangtai[i].checked?zhuangtai[i].checked = false :zhuangtai[i].checked = true;）））
if (zhuangtai[i].checked == true) { zhuangtai[i].checked = false; } else{ zhuangtai[i].checked = true; } } } }</script>