HTML n种方式实现隔行变色的示例代码
发布时间:2020-06-17 16:24:47 作者:公子清 我要评论
这篇文章主要介绍了HTML n种方式实现隔行变色的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
本文主要介绍了HTML n种方式实现隔行变色的示例代码,分享给大家,具体如下:
n种方式实现隔行变色
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 | <!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; } */ /* //=> 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 = 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'; // } // } //=>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第三种方式 colorArray+bgColorYellow... // 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.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隔行变色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章
- 想必大家对隔行变换色的概念都不陌生了吧,其实css3也是可以实现的,下面为大家详细介绍下2014-02-19
- 常见的CSS表格样式有圆角、隔行、变色等等,下面有个不错的示例,感兴趣的朋友可以参考下2013-12-30
- 单一的表格很容易使人感到枯燥,使用变色效果可以使得表格看起来更加舒适,在本文将为大家介绍下使用css实现隔行变色显示,感兴趣的朋友可以参考下2013-10-05
- CSS expression 隔行换色效果实现代码,需要的朋友可以参考下。2009-12-13
网页设计制作CSS实现隔行换色两种方法-CSS教程-网页制作-网页教学网
网页设计制作,CSS实现隔行换色两种方法: 第一种方法: 以下为引用的内容: <style type="text/css"> UL.myul12008-10-17CSS实现网页中的隔行换色代码-CSS教程-网页制作-网页教学网
以前在Dreamweaver中用表格布局网页的时候常常用到一种设计手法--隔行换色。也就是新闻列表或是列表类的每隔一行就换另一个色彩这样显得很漂亮也很合适阅读。所以这种2008-10-17- CSS隔行换色的问题,其实很简单,您可以根据您的需要,采用下面的任何一种方法,当然,要适合你的编码与需求情况: 一、background背景图片 如果行高固定的话,推2008-10-17
最新评论