JS隔行变色
2015-12-09 10:40
736 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS隔行变色</title> <style> *{ padding: 0; margin: 0;} ul{ list-style: none;} body{ color: #333; font-size: 14px; font-family: "Microsoft Yahei"; background: #fff;} #box li{ padding: 10px; border-bottom: 1px solid #eee; -webkit-box-sizing: border-box; box-sizing: border-box;} #box li.hover{ background: #F6FBFF!important;} </style> </head> <body> <div id="box"> <ul> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> <li>无序列表4</li> <li>无序列表5</li> <li>无序列表6</li> <li>无序列表7</li> <li>无序列表8</li> <li>无序列表9</li> <li>无序列表10</li> </ul> </div> <script> window.onload = function(){ var oDiv = document.getElementById('box'); var aLi = document.getElementsByTagName('li'); var that = null; for(var i = 0; i < aLi.length; i++){ // 隔行变色(取模%) /*if(i%2 == 0){ aLi[i].style.background = '#f9f9f9'; }else{ aLi[i].style.background = ''; }*/ // 或者用三目运算 i%2 == 0 ? aLi[i].style.background = '#f9f9f9' : aLi[i].style.background = ''; // 方法一:鼠标经过,清空所有,当前高亮 /*aLi[i].onmouseover = function(){ for(var i = 0; i < aLi.length; i++){ aLi[i].className = ''; } this.className = 'hover'; };*/ // 方法二:利用that变量缓存当前的class aLi[i].onmouseover = function(){ that = this.className; this.className = 'hover'; }; aLi[i].onmouseout = function(){ this.className = that; } } }; </script> </body> </html>
相关文章推荐
- js 实时监听input中值变化 【转】
- toast js
- js prototype
- JavaScript程序设计之JS调试
- JS判断变量是否以某个字符串结尾
- jsp里面的页面切换
- JS判断数组中是否包含某个值
- js !!
- js实现的星星评分功能函数
- js倒计时,秒倒计时,天倒计时
- JavaScript中的this到底是什么(一)
- 夺命雷公狗---javascript NO:33 类的继承(完结)
- 10010---Angular JS 表格
- js实现的奥运倒计时时钟效果代码
- 夺命雷公狗---javascript NO:31 私有属性
- js的this指针理解
- 夺命雷公狗---javascript NO:30 闭包
- jsp清空cookie
- js “+” 连接字符串&数字相加 数字相加出现多位小数 函数调用单引号双引号嵌套和转义字符的使用
- 夺命雷公狗---javascript NO:28 原型链