隔行变色:
先获取要操作的HTML标签
var oLis = document.querySelectorAll('li')
循环HTML标签
for (var i = 0; i < oLis.length; i++) {}
利用for循环达到一条三元判断语句就能为奇数行和偶数行换上不同的背景颜色
oLis[i].style.background = i % 2 ? 'blue' : 'red';
鼠标移上变色：
在for循环中创建鼠标移上事件 并从新为该html标签上背景色
利用for循环来达到一条鼠标移上事件就能复用的目的
oLis[i].onmouseenter = function () {this.style.background = 'gold';}
鼠标移出恢复原本的颜色：
在for循环中创建鼠标移出事件 并从新为该html标签换上之前的背景色
利用for循环来达到一条鼠标移出事件就能复用的目的
oLis[i].onmouseleave = function () {this.style.background = this.myBg;}
点击html元素弹出点击的是哪行html元素 和 点击的html行数是什么颜色:
在for循环中添加一个保存行数的变量
oLis[i].myIndex = i;
在for循环中添加一个保存颜色的变量
oLis[i].myBg = i % 2 ? 'blue' : 'red';
在for循环中创建鼠标点击事件 并在事件里填入警告显示
利用for循环来达到一条鼠标点击事件就能复用的目的
oLis[i].onclick = function(){alert(`这是第${this.myIndex}行 背景颜色是${this.myBg}`);}
完整代码
<body><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><script>var oLis = document.querySelectorAll('li');// 获取html元素for (var i = 0; i < oLis.length; i++) {oLis[i].myBg = i % 2 ? 'blue' : 'red'; // 保存颜色oLis[i].myIndex = i; // 保存行数oLis[i].style.background = i % 2 ? 'blue' : 'red'; // 判断奇、偶行 并为奇、偶行上色oLis[i].onmouseenter = function () { // 鼠标移上事件 function:鼠标事件 onmouseenter:移上this.style.background = 'gold'; // 从新上色}oLis[i].onmouseleave = function () { // 鼠标移上事件 function:鼠标事件 onmouseleave:移出this.style.background = this.myBg; // 把移上时从新上的颜色 变更为之之前原本的颜色}oLis[i].onclick = function(){ // 鼠标移上事件 function:鼠标事件 onclick:点击alert(`这是第${this.myIndex}行 背景颜色是${this.myBg}`); // 弹出警告框}}</script></body>
如果觉得《js 隔行变色+鼠标移上换色+鼠标离开颜色恢复+鼠标点击弹出点击的是第几行是什么颜色》对你有帮助，请点赞、收藏，并留下你的观点哦！
