DOM操作,隔行换色

隔行换色分两种

第一种通过行内样式更改背景色,鼠标点击时,更换背景色(排他思想)

<ul>

</ul>

var liEls = document.querySelectorAll(".item");

//for循环遍历,给每个li添加背景色

// 奇数行背景色是红色,偶数行是绿色

for (var i = 0; i < liEls.length; i++) {

liEls[i].style.backgroundColor = i % 2 == 0 ? '#f00' : '#0f0';

// 给每个li添加点击事件

liEls[i].onclick = function () {

//排他思想,把所有背景色删一遍,重新设置样式

//这种方法简单粗暴,但是性能差

for (var j = 0; j < liEls.length; j++) {

liEls[j].style.backgroundColor = '';

liEls[j].style.backgroundColor = j % 2 == 0 ? '#f00' : '#0f0';

}

this.style.backgroundColor = '#00f';

}

</script>

第二种通过保存下标,来找到点击之前的元素,进行修改(把点击上一个元素的背景色恢复成默认的;然后再给点击的元素设置背景色)

<ul>

</ul>

var liEls = document.querySelectorAll(".item");

//这种方法通过保存下标,来找到点击之前的元素,进行修改(把点击上一个元素的背景色恢复成默认的;然后再给点击的元素设置背景色)

// 某一次点击的下标(初始值没有)

var tempIndex = -1;

//循环遍历,给每个li添加背景色

for (var i = 0; i < liEls.length; i++) {

// 三元表达式

liEls[i].style.backgroundColor = i % 2 == 0 ? '#f00' : '#0f0';

//获取下标

liEls[i].index = i;

// 添加点击事件

liEls[i].onclick = function () {

// 这里判断tempIndex 不等于-1 ,说明上一次点击更改了背景色,要把更改的背景色恢复成默认的背景色

if (tempIndex != -1) {

liEls[tempIndex].style.backgroundColor = tempIndex % 2 == 0 ? '#f00' : '#0f0';

}

// 把点击某个元素的下标传给tempIndex来保存

tempIndex = this.index;

this.style.backgroundColor = '#00f';

}

</script>

DOM操作,隔行换色相关推荐

Javascript知识【案例：表格隔行换色】
目录 1,案例1:表格隔行换色 2,案例2:鼠标移入粉色,移出原色[基础+] 2.1:需求说明 2.2:前置知识:鼠标移入移出事件 2.3:前置拓展知识:this关键字 2.4:分析&实现 1 ...
【前端3】jquary：页面加载，选择器，隔行换色，Dom，全选，动画，遍历，广告/抽奖，表单校验插件
文章目录 1.jquery框架引入:$("mydiv") 当成id选择器 2.jquery版本/对象:$(js对象) -> jquery对象 3.jquery的页面加载事件: ...
使用jquery实现隔行换色($(tbody tr:odd)获取奇数行和$(tbody tr:even)获取偶数行)以及CSS类操作addClass()的使用
使用jquery实现隔行换色技术分析最主要的就是jquery的选择器获取tbody的奇数行("tbodytr:odd")设置背景颜色在获取tbody的偶数行("tb ...
JQuery基础-》带有案例-隔行换色-全选-QQ表情-下拉框左右移动
JQuery基础下面案例用到的资源包:https://download.csdn.net/download/weixin_44537122/11879014 1.内容 1. JQuery 基础:1. ...
在PHP当中制作隔行换色的效果以及制作上下翻页的效果！
首先说明隔行换色的效果,需要用到tr:nth_child(odd);或者括号里的值是even,odd是从第一行开始隔一行,even是从第二行开始: 具体代码如下图案所示: 1 <style> ...
ListView数据项隔行换色控制实现详解
看到有朋友在群里问过ListView项达到一定数量时加不同色选项的功能,有时间就学习了下ListView隔行换色的效果,大体效果实现出来了,吼吼,写博客里面,跟大家学习交流,一样的,先贴效果,再上代码 ...
隔行换色案例||全选和全不选||QQ表情选择||多选下拉列表左右移动
01.隔行换色.html <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
前端简单入门第十八讲使用jQuery实现表格的隔行换色
还记得之前我使用JavaScript来实现表格的隔行换色效果吗?如果读者初次翻阅本文,可记得看看前端简单入门第十二讲使用JavaScript完成后台数据展示表格的隔行换色!现在我就来使用jQuery ...
Web前端第四季(jQuery):四:301-jQuery基本过滤器(奇数和偶数)+302-实现隔行换色+401-祖先选择器和子代选择器
目录一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 2.SIKI学院:我参考此视频实操 3.w3school ...

DOM操作,隔行换色

DOM操作,隔行换色相关推荐

最新文章

热门文章