样式操作6-隔行变色和高亮显示
Posted jiumen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了样式操作6-隔行变色和高亮显示相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul id="mv"> <li>西施</li> <li>貂蝉</li> <li>王昭君</li> <li>杨玉环</li> <li>芙蓉姐姐</li> </ul> <script> // 1 隔行变色 // 获取到所有的li，判断奇数行和偶数行 var mv = document.getElementById(‘mv‘); var lists = mv.getElementsByTagName(‘li‘); for (var i = 0; i < lists.length; i++) var li = lists[i]; // 判断当前的li 是奇数行 还是偶数行 if (i % 2 === 0) // i是偶数 ， 但是当前是奇数行 // 设置奇数行的背景颜色 li.style.backgroundColor = ‘red‘; else // 设置偶数行的背景颜色 li.style.backgroundColor = ‘green‘; // 2 鼠标放上高亮显示 // // 2.0 给所有的li 注册事件 鼠标经过和鼠标离开的两个事件 for (var i = 0; i < lists.length; i++) var li = lists[i]; // 2.1 鼠标放到li上，高亮显示当前的li var bg; li.onmouseover = function () // 鼠标放到li上的时候，应该记录li当前的颜色 bg = this.style.backgroundColor; this.style.backgroundColor = ‘yellow‘; // 2.2 鼠标离开li，还原原来的颜色 li.onmouseout = function () // 鼠标离开，还原原来的颜色 this.style.backgroundColor = bg; </script> </body> </html>
以上是关于样式操作6-隔行变色和高亮显示的主要内容，如果未能解决你的问题，请参考以下文章