标签：元素 ott his doctype this pad point length mil
一、
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> html,body{ margin: 0; padding: 0; width: 100%; height: 100%; cursor: pointer; } </style> </head> <body id="bod" style="background-color:white;"> <script type="text/javascript"> var obod=document.getElementById("bod"); //第一种：if else obod.onclick=function(){ var obody=obod.style.backgroundColor; console.log(obody); //为什么输出不了---因为绑定了点击事件，需要点击body才会显示 if(obody==="white"){ obod.style.backgroundColor="black"; }else if(obody==="black"){ obod.style.backgroundColor="red"; }else if(obody==="red"){ obod.style.backgroundColor="pink"; }else{ obod.style.backgroundColor="white"; } }; //第二种：switch case // obod.onclick=function(){ // var obody=this.style.backgroundColor; // switch(obody){ // case "white": // this.style.backgroundColor="black"; // break; // case "black": // this.style.backgroundColor="red"; // break; // case "red": // this.style.backgroundColor="pink"; // break; // default: // this.style.backgroundColor="white" // }; // }; </script> </body> </html>
二、选项卡
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; font-family: arial, "微软雅黑"; font-size: 14px; } ul,li{ list-style: none; } #tab{ margin: 30px auto; width: 500px; } #tab ul{ position: relative; top: 1px; z-index: 100; } #tab ul li{ width: 100px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #ddd; margin-right: 10px; float: left; cursor: pointer; } #tab ul li.select{ /*选中样式？？？类名？？ 么有空格*/ background: -webkit-linear-gradient(top left,red,orange,yellow,green,blue,purple); border-bottom:none ; } #tab div{ border: 1px solid #ddd; height: 100px; line-height: 100px; text-align: center; clear: both; /*清除浮动，子级浮动对叔叔级元素造成影响，直接给叔叔级元素添加clear：both*/ display: none; } #tab div.select{ display: block; } .list1{ background: red; } </style> </head> <body> 第一步：分析需求思路 1、写出默认选中显示样式.select{}， 显示第一个li 与第一个div 2、鼠标经过某一个li时，让当前li和对应的div 有select的样式而其余的没有这个样式即可（鼠标经过某个li，先让所有的li和div都没有select样式，再让当前li及对应的div有select的样式即可） 第二步：要操作谁就先获取谁 第三步：制定一个功能方法（函数），实现需求 第四部：给li绑定鼠标事件，运行函数 <div id="tab"> <ul> <li class="select">视频</li> <li class="list1">综艺</li> <li>秒拍</li> </ul> <div class="select">视频内容</div> <div>综艺内容</div> <div>秒拍内容</div> </div> <script type="text/javascript"> var oli=document.getElementById("tab").getElementsByTagName("li");//获取一组li var odiv=document.getElementById("tab").getElementsByTagName("div");//获取一组div function tabChange(n){ // n 形参 没有执行函数的时候，他就是个参数， for (var i=0;i<oli.length;i++){ oli[i].className=""; odiv[i].className=""; // 令循环中的每一个li和div都没有了className // 会影响到其他效果.list的红色背景？？？？？？更好的定义方式？ }; oli[n].className="select"; odiv[n].className="select"; //运行函数时才会实现 所有className为空 和 当前元素的select样式的显示 }; for(var i=0;i<oli.length;i++){ oli[i].index=i;//在每一次循环的时候，将每一个li的索引存储给index oli[i].onmouseover=function(){ tabChange(this.index); //执行函数 （）内的形参就代表该元素的索引 }; }; // 绑定事件 运行函数 </script> </body> </html>
三、隔行换色
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; border: 1px solid #dddcdb; margin: 50px auto; width: 500px; /*background: -webkit-linear-gradient(top left,#b3131a,#ad198b,#0000cc);*/ } li{ height: 30px; line-height: 30px; } .bg0{ background: #eeebee; } .bg1{ background: red; } .bg2{ background: blue; } .bg3{ background: pink; } </style> </head> <body> <div> <ul id="ull"> <li>我要隔行变色我要隔行变色</li> <li>我要隔行变色我要隔行变色</li> <li>我要隔行变色我要隔行变色</li> <li>我要隔行变色我要隔行变色</li> <li>我要隔行变色我要隔行变色</li> <li>我要隔行变色我要隔行变色</li> <li>我要隔行变色我要隔行变色</li> <li>我要隔行变色我要隔行变色</li> <li>我要隔行变色我要隔行变色</li> <li>我要隔行变色我要隔行变色</li> </ul> </div> <script type="text/javascript"> var oull=document.getElementById("ull"); var oli=oull.getElementsByTagName("li"); //第一种： // for (var i=0;i<oli.length;i++){ // var ol=oli[i]; // //获取循环中的每个li // if(i%2===0){ // ol.className="bg0"; // ol.oldName="bg0"; // }else{ // ol.className="bg1"; // ol.oldName="bg1"; // } // ol.onmouseover=function(){ // this.className="bg2" // }; // ol.onmouseout=function(){ // this.className=this.oldName; // }; // }; //分别添加新的属性储存鼠标经过前的值 //第二种： // for(var i=0;i<oli.length;i++){ // (i%2===0)?(oli[i].className="bg0",oli[i].oldName="bg0"):(oli[i].className="bg1",oli[i].oldName="bg1"); // // oli[i].onmouseover=function(){ // this.className="bg3" // }; // oli[i].onmouseout=function(){ // this.className=this.oldName // }; // }; //三元运算符 自定义添加属性 ////第三种：switch case (隔两行变色) // for(var i=0;i<oli.length;i++){ // switch (i%3){ // case 0: // oli[i].className="bg0"; // oli[i].oldName="bg0"; // break; // case 1: // oli[i].className="bg1"; // oli[i].oldName="bg1"; // break; // default: // oli[i].className="bg2"; // oli[i].oldName="bg2"; // }; // oli[i].onmouseover=function(){ // this.className="bg3" // }; // oli[i].onmouseout=function(){ // this.className=this.oldName // }; // } //第四种： for(var i=0;i<oli.length;i++){ oli[i].className="bg"+i%2+""; //拼接字符串 oli[i].oldName="bg"+i%2+""; //自定义变量 oli[i].onmouseover=function(){ this.className="bg2" }; oli[i].onmouseout=function(){ this.className=this.oldName; }; }; // 拼接字符串 自定义变量 // if else // for(var i=0;i<oli.length;i++){ // var oll=oli[i]; //// 每一次循环的时候获取oli // if(i%2===0){ // oll.className="bg1"; // }else{ // oll.className="bg2"; // } // } //三元运算符 // for (var i=0;i<oli.length;i++){ // var oll=oli[i]; // (i%2===0)?(oll.className="bg1"):(oll.className="bg2"); // } // switch case 隔三行变色 </script> </body> </html>
标签：元素 ott his doctype this pad point length mil
原文地址：http://www.cnblogs.com/dalyn/p/7270727.html
