HTMLn种⽅式实现隔⾏变⾊的⽰例代码本⽂主要介绍了HTML n种⽅式实现隔⾏变⾊的⽰例代码,分享给⼤家,具体如下:
n种⽅式实现隔⾏变⾊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>n种⽅式实现隔⾏变⾊</title>
<style>
.box {
margin: 20px auto;
width: 300px;
}
.box li {
line-height: 35px;
border-bottom: 1px dashed #AAA;
padding: 0 5px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
}
/* 1.css3第⼀种⽅式 */
/* .box li:nth-of-type(3n+1){
background-color: green;
}
.box li:nth-of-type(3n+2){
background-color: red;
}
.box li:nth-of-type(3n){
background-color: blue;
html实现用户注册登录代码
} */
/
* //=> bgColor与ulList组合2种⽅式实现 */
/* .bgColorYellow {
background-color: yellow;
}
.bgColorRed {
background-color: red;
}
.bgColorBlue {
background-color: blue;
}  */
/* //=> bgColor与ulList组合1种⽅式实现 */
.
bg0 {
background-color: lightcoral;
}
.bg1 {
background-color: lightgreen;
}
.bg2 {
background-color: lightskyblue;
}
#hover {
background-color: red;
}
/* 我们把hover放在bgn的后⾯,当元素的class=‘bgo’以bgo样式为主 */
.hover {
background-color: blueviolet;
}
</style>
</head>
<body>
<ul class="box" id="box">
<li>上次⼤家成都你cdsvdvd vax v a 杀⾍⽔</li>
<li>撒差多少VCD深V上次的深V但是是的深V的深V是DVD深V的深V的深V是⼤Vsad深V是的v</li>
<li>⼤SAV吃撒撒发顺丰</li>
<li>萨芬从深V撒VCDVD深V是⼤V撒⼤V⼤是发⼤V是⼤V是哒但是啥的 </li>
<li>撒房产税才是</li>
<li>阿深V⼤SAV的在v</li>
<li>上次⼤家成都你cdsvdvd vax v a 杀⾍⽔</li>
<!-- /*==利⽤css优先级搞定:默认背景颜⾊基于样式类完成,⿏标滑过的样式⽐样式类优先级⾼⼀些(ID
选择器/⾏内样式) -->
</ul>
<script>
//=>隔三⾏变⾊⾼亮选中::修改元素的class样式类
// 样式表: ID选择器
//        标签选择题
//        样式类选择器
//        ⾏内样式
//        这些⽅式存在优先级的问题:⾏内,ID,样式类,标签...
// ⽅案:
//    1.依次遍历每⼀个li,通过索引除以3取余数,让当前的li有不同的背景⾊
//    2.第⼀种的技巧,告别⼀个个的判断,直接采⽤数组或者直接到对应的样式的⽅式来完成
//    3.不是遍历每⼀个li,⽽是遍历每⼀组
var oBox = ElementById('box');
var ulList = ElementsByTagName('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 = place('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';
// }
// }
//=>3.js第⼆种⽅式
//  for (var i=0; i<ulList.length; i++){
//      switch ( i % 3) {
//          case 0:
//            ulList[i].className = "bgColorYellow";
/
/            break;
//            case 1:
//            ulList[i].className = "bgColorRed";
//            break;
//            case 2:
//            ulList[i].className = "bgColorBlue";
//            break;
//      }
//  }
//=>4.js第三种⽅式 
//  var colorArray = ["bgColorYellow","bgColorRed", "bgColorBlue"];
/
/ for (var i=0; i<ulList.length; i++){
//=> 分析: i%3=0 "bgColorYellow" colorArray[0]
//=>        i%3=1  "bgColorBlue"  colorArray[1]
//=>        i%3=2  "bgColorRed"  colorArray[2]
//=> i%3的余数是多少?就是我们当前需要到数组中通过此索引到的样式类,⽽这个样式类则是当前li需要设置的class
//      ulList[i].className = colorArray[i % 3];
//  }
//=>5.js第四种⽅式
// for (var i=0; i<ulList.length; i++){
//    ulList[i].className = 'bg'+ (i%3); //=>隔三⾏变⾊修改样式类
//    //=>在改变之前把原有的样式类信息存储到⾃定义属性中
//    ulList[i].myOldClass= ulList[i].className;
//    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.OldClass;
//            }
// }
//=>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隔⾏变⾊内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章,希望⼤家以后多多⽀持!

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。