Chinaunix首页 | 论坛 | 博客

拾忆1765207585的ChinaUnix博客

首页　| 　博文目录　| 　关于我

拾忆1765207585

  • 博客访问： 929447
  • 博文数量： 210
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2070
  • 用 户 组： 普通用户
  • 注册时间： 2014-11-19 21:54
文章分类

全部博文（210）

文章存档

2020年（2）

2019年（18）

2018年（27）

2017年（5）

2016年（53）

2015年（88）

2014年（17）

我的朋友
最近访客
推荐博文
JavaScript for if 对div 奇数偶数不同样式的分配

分类： JavaScript

2016-08-08 09:02:51


点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>first demo</title>
  6.         <script type="text/javascript">
  7.             
  8.         </script>
  9.         <style type="text/css">
  10.             #box{
  11.                 width: 500px;
  12.                 height: 300px;
  13.                 border:1px solid black;
  14.             }
  15.             
  16.             .all{
  17.                 width:500px;
  18.                 height: 50px;
  19.                 outline:1px solid black;
  20.                 /*background: yellow;*/
  21.             }
  22.             
  23.             
  24.         </style>
  25.         
  26.     </head>
  27.     <body>
  28.         <div id="box">
  29.             <div class="all " >1</div>
  30.             <div class="all ">2</div>
  31.             <div class="all ">3</div>
  32.             <div class="all ">4</div>
  33.             <div class="all ">5</div>
  34.             <div class="all ">6</div>
  35.         </div>
  36.         <script type="text/javascript">
  37.             //获取 id box
  38.             var box= document.getElementById("box");
  39.             //获取box下的div
  40.             var boxDiv = box.getElementsByTagName("div");
  41.             oldColor="";
  42. //            console.log(boxDiv);
  43.             //进行循环的判断
  44.             for(var b=0; b<=boxDiv.length; b++){
  45. //                console.log(boxDiv.length);
  46.             //循环中进行奇偶性的判断，设置不同的样式
  47.                 if(b%2==0){
  48.                     boxDiv[b].style.background="green";
  49.                     
  50.                 }else{
  51.                     boxDiv[b].style.background="yellow";
  52.                     
  53.                 }
  54.                 //鼠标移到，移除时间
  55.                 boxDiv[b].onmouseover=function(){
  56.                 oldColor=this.style.backgroundColor;
  57.                 this.style.backgroundColor="red";
  58.             }
  59.             boxDiv[b].onmouseout=function(){
  60.                 
  61.                 this.style.backgroundColor=oldColor;
  62.             }
  63.         
  64.                 
  65.                 
  66.             }
  67.             
  68.             
  69.     
  70.             
  71.             
  72.         </script>
  73.     </body>
  74. </html>

阅读(2531) | 评论(0) | 转发(0) |
0

上一篇：JavaScript 简单的学习（8）Boolean 逻辑

下一篇：JavaScript for if 对tab选框的制作

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6