JS-隔行换色+鼠标移上去变色

<style>ul{list-style: none;}
</style>
<body><ul><li>111</li><li>222</li><li>333</li><li>444</li><li>555</li><li>666</li></ul><script>//要操作li 先获取所有livar lis = document.querySelectorAll('li')console.log(lis);// for循环里的 变量 i  要用let 定义 ！！！！！！！// 用var 有时会报错   // 1.隔行换色for(let i=0; i<=lis.length-1; i++){if(i%2===0){lis[i].style.backgroundColor = 'pink'}else{lis[i].style.backgroundColor = 'lightblue'}// 2.移上去变色lis[i].onmouseover = function(){// 这里要用  thisthis.style.backgroundColor = 'green'}// 3.移出变为原来的颜色lis[i].onmouseout = function(){if(i%2===0){lis[i].style.backgroundColor = 'pink'}else{lis[i].style.backgroundColor = 'lightblue'}}}</script>
</body>

JS-隔行换色+鼠标移上去变色相关推荐

JavaScript-表格隔行换色·鼠标上移换色·合并显示
HTML <table id="tab1" border="1" width="800" align="center&quo ...
转，帅气的表格隔行换色+鼠标经过变色、点击变色
源码是: <style type="text/css"><!– #senfe { width: 650px; border-top: #E3E3E3 1px so ...
js 隔行变色+鼠标移上换色+鼠标离开颜色恢复+鼠标点击弹出点击的是第几行是什么颜色
隔行变色: 先获取要操作的HTML标签 var oLis = document.querySelectorAll('li') 循环HTML标签 for (var i = 0; i < oLis. ...
隔行换色并且鼠标指向行变色的表格
一应用对于一些清单型数据,通常是利用表格展示到页面中.如果数据比较多,很容易看串行.这时,可以为表格添加隔行换色并且鼠标指向行变色功能. 二代码 <script language=&quo ...
一眼就会table隔行换色、table表头固定、隔行色、鼠标移动行换色
抽出时间整理笔记:table头部固定.超出宽度可横向移动,主信息隔行换色.鼠标移动变色.举例: code : <!DOCTYPE HTML> <head><meta ht ...
JS比较常用的隔行换色和获取焦点以及失去焦点效果
JS作为一门比较简单的编程当然一些JS效果的使用是不可避免的就比如说标签的隔行换色.还有搜索框的失去和获取焦点我就来带大家写一下这两种常用的效果先来说一下标签的隔行换色吧目录一.元素标签的 ...
java css隔行变色_JS+CSS实现Li列表隔行换色效果的方法
本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: CSS+Js实现Li列表隔行换色效果 .mytable {border-collapse:colla ...
jquery 表格（鼠标悬停改变改变行背景+隔行换色）
NUM1:鼠标悬停改变改变行背景: NUM2:隔行换色: HTML: <table border="1"><thead><tr><th&g ...
【前端3】jquary：页面加载，选择器，隔行换色，Dom，全选，动画，遍历，广告/抽奖，表单校验插件
文章目录 1.jquery框架引入:$("mydiv") 当成id选择器 2.jquery版本/对象:$(js对象) -> jquery对象 3.jquery的页面加载事件: ...

JS-隔行换色+鼠标移上去变色

JS-隔行换色+鼠标移上去变色相关推荐

最新文章

热门文章