|
// 这些方式存在优先级的问题:行内，ID，样式类，标签...
// 方案：
// 1.依次遍历每一个li，通过索引除以3取余数，让当前的li有不同的背景色
// 2.第一种的技巧，告别一个个的判断，直接采用数组或者直接找到对应的样式的方式来完成
// 3.不是遍历每一个li，而是遍历每一组
var oBox = document.getElementById('box');
var ulList = oBox.getElementsByTagName('li');
//*高亮第3种方式：
for (var i=0; i<ulList.length; i++){
ulList[i].className = 'bg'+ (i%3);
//=>鼠标滑过：在原有样式类基础上累加一个hover样式类（由于hover在样式类中靠后，它的样式会覆盖原有的bg中的样式）
//=>鼠标离开：把新增的hover样式类移除掉即可
ulList[i].onmouseover = function (){
this.className += 'hover'
}
ulList[i].onmouseout = function (){
// this.className = 'bg0 hover'- 'hover';这不是字符串相减，这是数学运算结果是（NaN）
this.className = this.className.replace('hover','');
}
}
//=>2.js第一种方式
// for (var i = 0; i < ulList.length; i++) {
// //=> 分析：i=0 第一个li i%3=0
// //=> i=1 第一个li i%3=1
// //=> i=2 第一个li i%3=2
// //=> i=3 第一个li i%3=0
// var n=i%3; //当前循环找出来的那个li
// liColor=ulList[i];
// if(n===0){
// liColor.style.backgroundColor='red';
// }else if(n===1){
// liColor.style.backgroundColor='yellow';
// }else {
// liColor.style.backgroundColor='pink';
// }
// } （编辑：滁州站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
