-
元素样式操作
- 元素显隐
- 代码
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- css代码 --> <style type="text/css"> * { padding: 0px; margin:0px; } #btn { display: block; margin:0 auto; } /* 盒模型 */ #xhz { width: 400px; height: 150px; border:1px solid black; background-color: #245269; margin:0 auto; text-align: center; padding-top:50px; color:burlywood; font-size: 40px;; } </style> </head> <body> <!-- HTML代码 --> <button id="btn" type="button">点击</button> <div id="xhz">我是可显示隐藏盒子</div> </body> <!-- js代码 --> <script type="text/javascript"> // 获取按钮btn var btn=document.getElementById("btn"); // 获取盒模型div var xhz=document.getElementById("xhz" ) // 按钮点击事件:用户点击按钮之后盒子隐藏,默认情况下显示 btn.onclick=function() { xhz.style.display='none'; } // 按钮点击事件增强版:用户能够点击一次隐藏,再点击一次显示效果 // 类似于设置一个锁:开锁,上锁 var lock=1; btn.onclick=function() { if(lock==1) { xhz.style.display='none'; lock=0; } else { xhz.style.display='block'; lock=1; } } </script> </html>
-
- 效果图
- 代码
- 下滑显隐
- 代码
- 效果
- 代码
- 点击变色
- 代码
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box{ width: 800px; height: 600px; margin: 0 auto; } .xhz{ width: 100px; height: 100px; float: left; margin: 10px; text-align: center; line-height: 100px; color: white; } </style> </head> <body> <!-- html代码 --> <div class="box"> <div class="xhz" style="background:green"></div> <div class="xhz" style="background:green"></div> <div class="xhz" style="background:green"></div> <div class="xhz" style="background:green"></div> <div class="xhz" style="background:green"></div> <div class="xhz" style="background:green"></div> <div class="xhz" style="background:green"></div> <div class="xhz" style="background:green"></div> <div class="xhz" style="background:green"></div> <div class="xhz" style="background:green"></div> <div class="xhz" style="background:green"></div> <div class="xhz" style="background:green"></div> <div class="xhz" style="background:green"></div> <div class="xhz" style="background:green"></div> <div class="xhz" style="background:green"></div> <div class="xhz" style="background:green"></div> <div class="xhz" style="background:green"></div> <div class="xhz" style="background:green"></div> </div> </body> <!-- js代码 --> <script type="text/javascript"> // 获取所有的xhz的元素 var xhz=document.getElementsByClassName("xhz"); var lock=1;//开锁 //lock相当一把锁, // 给所有的xhz的元素加上事件 for(var i=0;i<xhz.length;i++) { xhz[i].onclick=function() { if(lock==1) { // 在事件中this指向了当前对象 this.style.background='red'; lock=2; } else { this.style.background='blue'; lock=1; } // 点击之后盒子内部提示语我变色了 this.innerHTML='我变色了'; } } </script> </html>
-
- 效果
- 代码
- 围棋效果
- 代码
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box{ width: 700px;height: 700px;margin: 0 auto; background: url(img/wqqp.jpg) no-repeat 0/100% 100%; position: relative; } .wq{ width: 670px;height: 670px;position: absolute; top: 18px;left: 18px; } .wqqz{ width: 25px;height: 25px;border-radius:50% ; margin: 5px;background: rgba(0,0,0,0); float: left; } </style> </head> <body> <div class="box"> <div class="wq"> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> <div class="wqqz"></div> </div> </div> <script type="text/javascript"> var wqqz = document.getElementsByClassName("wqqz"); var abc = 1; for (var i=0;i<wqqz.length;i++) { wqqz[i].onclick = function(){ if(abc==1){ this.style.background="#000"; abc = 2; }else{ this.style.background="#ccc"; abc = 1; }; this.style.boxShadow="3px 3px 1px #666"; }; }; </script> </body> </html>
-
- 效果
- 代码
- 选项卡切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0px; padding:0px; } li{ list-style: none; float: left; border: 1px solid red; width: 100px; text-align: center; cursor: pointer; } #contentBox{ border: 1px solid red; width: 406px; text-align: center; } #contentBox div{ height: 300px; border: 1px solid red; } ul{ overflow: hidden; } #con_one_2{ display: none; } #con_one_3{ display: none; } #con_one_4{ display: none; } .bg{ background-color: purple; } .bgn{ background-color: white; } </style> </head> <body> <ul> <li id="one1" onmouseover="setTab(1);"> 新闻1 </li> <li id="one2" onmouseover="setTab(2);"> 新闻2 </li> <li id="one3" onmouseover="setTab(3);"> 新闻3 </li> <li id="one4" onmouseover="setTab(4);"> 新闻4 </li> </ul> <div id="contentBox"> <div id="con_one_1"> 新闻联播1 </div> <div id="con_one_2"> 新闻联播2 </div> <div id="con_one_3"> 新闻联播3 </div> <div id="con_one_4"> 新闻联播4 </div> </div> </body> <script type="text/javascript"> function setTab(n){ <!-- n=1时 先隐藏,后显示 --> for (var i = 1; i < 5; i++){ var obj1 = document.getElementById("con_one_" + i);//盒子 var obj1n = document.getElementById("one" + i);//按钮 obj1.style.display = "none";//所有盒子隐藏 obj1n.className = "bgn"; } <!-- //以下实现了点击的时候执行对象显示 --> var obj = document.getElementById("con_one_" + n);//第n个盒子 var objn = document.getElementById("one" + n);//第n个按钮 obj.style.display = "block";//第n个盒子显示 objn.className = "bg"; } <!-- function setTab1() --> <!-- { --> <!-- con_one_1.style.display="block"; --> <!-- con_one_2.style.display="none"; --> <!-- con_one_3.style.display="none"; --> <!-- con_one_4.style.display="none"; --> <!-- }function setTab2() --> <!-- { --> <!-- con_one_1.style.display="none"; --> <!-- con_one_2.style.display="block"; --> <!-- con_one_3.style.display="none"; --> <!-- con_one_4.style.display="none"; --> <!-- }function setTab3() --> <!-- { --> <!-- con_one_1.style.display="none"; --> <!-- con_one_2.style.display="none"; --> <!-- con_one_3.style.display="block"; --> <!-- con_one_4.style.display="none"; --> <!-- }function setTab4() --> <!-- { --> <!-- con_one_1.style.display="none"; --> <!-- con_one_2.style.display="none"; --> <!-- con_one_3.style.display="none"; --> <!-- con_one_4.style.display="block"; --> <!-- } --> </script> </html>
- 代码
-
- 效果
- 代码
- 元素显隐