|
// ulList[i].onmouseover = function () {
// // 高亮选中：
// //this:当前操纵的元素
// //=>第一种要领
// // this.style.background = 'yellow';
// //=>第二种要领
// // this.id = 'hover';
// //=>第三种要领
// //=>配置新样式之前把原有的样式生涯起来,this:当前操纵的元素也是一个元素工具，有许多内置属性，我们配置一个自界说属性，把原有的样式类信息存储进来
// console.dir(this);
// //=>滑过，简朴粗暴的让class便是hover
// this.className = 'hover';
// }
// ulList[i].onmouseout = function() {
// // this.style.background = '';
// // this.id = '';
// //=>分开：让其还原为原有的样式（原有的样式也许是bg0,bg1,bg2）
// this.className=this.myOldClass;
// }
// }
//=>6.js第五种方法三元运算符三种写法
//=>第一种写法
// function changeColor() {
// for (var i = 0 ; i< ulList.length; i++){
// ulList[i].style.backgroundColor = i % 3 == 0 ? 'lightblue': ((i%3 ==1)?'lightgreen':'lightpink');
// }
// }
// changeColor();
//=>第二种写法
// for (var i = 0; i < ulList.length; i++) {
// var n = i % 3;
// liColor = ulList[i];
// //=>以下两种都可以
// // n === 0 ? liColor.style.backgroundColor = 'red' : (n === 1 ? liColor.style.backgroundColor = 'yellow' :
// // liColor.style.backgroundColor = 'pink')
//=>第三种写法
// n === 0 ? liColor.style.backgroundColor='red': n === 1 ?liColor.style.backgroundColor='yellow' : liColor.style.backgroundColor='blue';
// }
//=>7.js第六种方法
//=>我们每一组轮回一次，在轮回体中，我们把当前这一组样式都配置好即可（也许呈现当前这一组不足3个，就报错了）
// var max = ulList.length - 1;
// for (var i=0;i<ulList.length;i+=3){
// ulList[i].style.background='bg0';
// i + 1 <= max ? ulList[i+1].style.background='bg1':null;
// i + 2 <= max ? ulList[i+2].style.background='bg2':null;
// }
</script>
</body>
</html>
运行结果如下：
到此这篇关于HTML n种方法实现隔行变色的示例代码的文章就先容到这了,更多相干HTML隔行变色内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！ （编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
