隔行变色小案例（5）

基于CSS3实现隔行变色

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>隔行变色</title><style>* {margin: 0;padding: 0;}ul, ol {list-style: none;}.box {margin: 20px auto;width: 300px;}.box li {padding: 0 5px;line-height: 35px;border-bottom: 1px dashed #AAA;cursor: pointer;/*超出一行的内容自动裁切,以省略号代替*/text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}.bgColor {background-color: lightcyan;}/*==CSS3==*//** nth-child(n):当前容器所有子元素中的第N个*    .box li:nth-child(1)：BOX容器所有子元素中的第一个并且标签名是LI的** nth-of-type(n):先给当前容器按照某一个标签名进行分组,获取分组中的第N个*    .box li:nth-of-type(1)：先获取BOX中所有的LI，在获取LI中的第一个*//*.box li:nth-of-type(even) { !*EVEN:偶数 ODD:奇数*!background: lightcyan;}.box li:hover { !*鼠标滑过的样式,鼠标离开回归原有样式*!background: lightcoral;}*//*.box li:nth-of-type(3n+1) {color: red;}.box li:nth-of-type(3n+2) {color: green;}.box li:nth-of-type(3n) {color: blue;}*/</style>
</head>
<body>
<ul class="box" id="box"><li>岁末，珠峰就业还在一直创造奇迹</li><li>珠峰成长的秘密-兴盛衰败一挥间，长留慈悲在心念</li><li>珠峰培训帮我实现外企梦—上海姑娘徐米米的故事</li><li>应届毕业生也能拿20多万年薪，我是面霸，我一口气拿下六个大公司offer</li><li>学完之真的能推荐进百度吗，我来揭发珠峰培训的老底</li><li>担心逻辑差，学不会，23岁切图小妹工资翻倍</li>
</ul>
<script src="js/changeColor.js"></script>
</body>
</html>

基于JS实现隔行变色

//=>1、获取BOX中所有的LI(我们需要先获取BOX)var oBox = document.getElementById('box');//=>想要修改BOX的样式
//1.通过STYLE修改行内样式
// oBox.style.backgroundColor = 'pink';//2.基于CLASS-NAME属性修改BOX的样式类，从而改变样式
// oBox['className'] = 'box bgColor';
// oBox['className'] += ' bgColor';var boxList = oBox.getElementsByTagName('li');//=>2、搞个循环来完成我们的样式赋值
/*for (var i = 0; i < boxList.length; i++) {//=>索引是奇数代表偶数行if (i % 2 !== 0) {// boxList[i].style.backgroundColor = 'pink';boxList[i].className += ' bgColor';}
}*/for (var i = 1; i < boxList.length; i += 2) {boxList[i].style.backgroundColor = 'lightblue';// boxList[i]['style']['backgroundColor'] = 'lightblue';
}

获取页面中的DOM元素

document.getElementById

在整个文档中，同过元素的ID属性值，获取到这个元素对象

getElementById是获取元素的方法，而document限定了获取元素的范围，我们把这个范围称之为：“上下文 [context]”

var oBox = document.getElementById('box');

1. 同过getElementById获取的元素是一个对象数据类型的值（里面包含很多内置的属性）
typeof oBox  =>"object"

2. 分析包含的属性
className：存储的是一个字符串，代表当前元素的样式类名
id：存储的是当前元素ID值（字符串）

innerHTML：存储当前元素中所有的内容（包含HTML标签）
innerText：存储当前元素中所有的文本内容（没有元素标签）

onclick：元素的一个事件属性，基于这个属性，可以给当前元素绑定点击事件
onmouseover：鼠标滑过事件
onmouseout：鼠标离开事件

style：存储当前元素所有的 "行内样式" 值（获取和操作的都只能是写在标签上的行内样式，写在样式表中的样式，无法基于这个属性获取到）

...

[context].getElementsByTagName

在指定的上下文中，通过元素的标签名获取一组元素集合

上下文是我们自己来指定的

var boxList = oBox.getElementsByTagName('li');

1. 获取的结果是一个元素集合（HTMLCollection）,首先它也是对象数据类型的，结构和数组非常相似（数字作为索引，length代表长度），但是不是数组，我们把它叫做“类数组”

boxList[0] 获取当前集合中的第一个LI（通过索引获取到具体的某一个LI即可）
boxList.length 获取集合中LI的数量

2. 集合中的每一项存储的值又是一个元素对象（对象数据类型，包含很多的内置属性，例如：id/className...）

boxList[1].style.color='red';  修改集合中第二个LI的文字颜色

隔三行变色

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>珠峰培训</title><link rel="stylesheet" href="css/reset.min.css"><style>.box {margin: 20px auto;width: 300px;}.box li {padding: 0 5px;line-height: 35px;border-bottom: 1px dashed #AAA;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}.bgColorRed {background-color: red;}.bgColorGreen {background-color: green;}.bgColorBlue {background-color: blue;}.bg0 {background: lightpink;}.bg1 {background: lightcyan;}.bg2 {background: lightblue;}/** 我们把HOVER放在BGN的后面,当元素的CLASS='BG0 HOVER'的时候，以HOVER样式为主*/.hover {background: #555;}#hover {background: orange;}</style>
</head>
<body>
<ul class="box" id="box"><li>岁末，珠峰就业还在一直创造奇迹</li><li>珠峰成长的秘密-兴盛衰败一挥间，长留慈悲在心念</li><li>珠峰培训帮我实现外企梦—上海姑娘徐米米的故事</li><li>应届毕业生也能拿20多万年薪，我是面霸，我一口气拿下六个大公司offer</li><li>学完之真的能推荐进百度吗，我来揭发珠峰培训的老底</li><li>担心逻辑差，学不会，23岁切图小妹工资翻倍</li><li>担心逻辑差，学不会，23岁切图小妹工资翻倍</li>
</ul>
<script src="js/change.js"></script>
</body>
</html>

var oBox = document.getElementById('box');
var ulList = oBox.getElementsByTagName('li');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的索引模3的余数liColor = ulList[i];//=>当前循环找出来的那个LIif (n === 0) {liColor.style.backgroundColor = 'red';} else if (n === 1) {liColor.style.backgroundColor = 'yellow';} else {liColor.style.backgroundColor = 'pink';}
}

var oBox = document.getElementById("box");
var itemList = oBox.getElementsByTagName("li");/* 1 */
/*for (var i = 0; i < itemList.length; i++) {// var n=i % 3;switch (i % 3) {case 0:itemList[i].className = "bgColorRed";break;case 1:itemList[i].className = "bgColorGreen";break;case 2:itemList[i].className = "bgColorBlue";break;}
}*//* 2 */
/*
var colorArray = ["bgColorRed", "bgColorGreen", "bgColorBlue"];
for (var i = 0; i < itemList.length; i++) {/!** i%3=0 "bgColorRed" colorArray[0]* i%3=1 "bgColorGreen" colorArray[1]* i%3=2 "bgColorBlue" colorArray[2]* ...* i%3的余数是多少,就是我们当前需要到数组中通过此索引找到的样式类,而这个样式类则是当前LI需要设置的class*!/itemList[i].className = colorArray[i % 3];
}*/for (var i = 0; i < itemList.length; i++) {itemList[i].className = 'bg' + (i % 3);
}

var oBox = document.getElementById("box"),aList = oBox.getElementsByTagName('li');/*
function changeColor() {for (var i = 0; i < aList.length; i++) {aList[i].style.backgroundColor = i % 3 == 0 ? 'lightblue' : ((i % 3 == 1) ? 'lightgreen' : 'lightpink');}
}changeColor();*/for (var i = 0; i < aList.length; i++) {var cur = aList[i];//0->false 1->true  2->trueif (i % 3) {//1||2//1==true  2==true 需要把布尔转化能为数字再比较if (i % 3 == true) {//1cur.className = "bg1";} else {//2cur.className = "bg2";}} else {cur.className = "bg0";}
}

var oBox = document.getElementById('box'),liList = oBox.getElementsByTagName('li');
var max = liList.length - 1;
for (var i = 0; i < liList.length; i += 3) {liList[i].style.background = '#46aa55';i + 1 <= max ? liList[i + 1].style.background = '#aa6053' : null;i + 2 <= max ? liList[i + 2].style.background = '#5477aa' : null;
}/**  liList[i].style.background = '#46aa55';*  liList[i + 1].style.background = '#aa6053';*  liList[i + 2].style.background = '#5477aa';*  我们每一组循环一次，在循环体中，我们把当前这一组的样式都设置好即可（可能出现当前这一组不够三 *  个,这样会报错）*******  各种方案思路*  1.依次遍历每一个LI，通过索引除以3取余数，让当前的LI有不同的背景色*  2.第一种的技巧，告别一个个的判断，直接采用数组或者直接找对应样式的方式来完成*  3.不是遍历每一个LI,而是遍历每一组*/

隔行变色小案例（5）相关推荐

[原创]持续给力：jQuery实现表格隔行变色效果案例详解
本案例源码 jQeruy20110323.rar 由于这几天忙着给学生出卷.测试等相关工作,导致这几天博客没有更新太多的东西,从本周开始我会持续的原创一些jQuery方面的文章,也请大家继续关注,我的 ...
[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件
隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素和表格类型 ) 2,一个页面 ...
点击按钮修改背景颜色及节点操作隔行变色案例
<input type="button" value="点击设置" id="dtn"/><div id="dd& ...
99乘法表带颜色HTML隔行变色,javascript小实例，实现99乘法表及隔行变色
人生短暂,废话不多说,直奔主题! 这个小实例的要求: 实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开 ...
表格元素的快捷获取以及隔行变色、鼠标移入变色案例
要求:以下列代码为基础,添加JS代码,令表格实现隔行变色效果,并且实现鼠标移入表格,该行表格背景色变为绿色,移出表格后表格恢复为原隔行变色形式的背景色. <table id='tab1' bor ...
jQuery中的几个案例：隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
学习DOM的第二天练习案例：表格隔行变色表格的全选与取消全选
1.表格的隔行变色鼠标划入与划出. 划入变色className='bg',划出className=' ' : <!DOCTYPE html> <html lang=" ...
JavaScript小案例程序保存（完整代码+效果展示）
1.案例--点击button换照片 html部分 <!DOCTYPE html> <html lang="en"> <head><meta ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...

隔行变色小案例（5）

基于CSS3实现隔行变色

基于JS实现隔行变色

获取页面中的DOM元素

隔三行变色

隔行变色小案例（5）相关推荐

最新文章

热门文章