JSの隔行変色


JSの隔行変色

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>    title>
head>
<style>
	* {
		margin: 0px;
		padding: 0px;
	}

	div li {
		list-style: none;
		line-height: 40px;
		border-bottom: 1px dashed #f0f;
	}

	#box {
		width: 500px;
		height: 300px;
		border: 1px solid #f0f;
		margin: 20px auto;
	}
style>

<body>
	<div id="box">
		<li>   1   li>
		<li>   2   li>
		<li>   3   li>
		<li>   4   li>
		<li>   5   li>
	div>

	<input type="button" value="      " id="btn">
body>

<script>
	//     
	var box = document.getElementById("box");
	var liList = box.getElementsByTagName("li");
	var color = "";
	for (var i = 0; i < liList.length; i++) {
		i % 2 == 0 ? liList[i].style.backgroundColor = "red" : "";
        //         
		liList[i].onmouseover = function () {
			color = this.style.backgroundColor;
			this.style.backgroundColor = "blue";
		}
		liList[i].onmouseleave = function () {
			this.style.backgroundColor = color;
		}
	}
script>

<script>
	//     
	var box = document.getElementById("box");
	var liList = box.getElementsByTagName("li");
	//           
	window.onload = function () {
		changeColor();
	}
	for (var i = 0; i < liList.length; i++) {
		liList[i].onmouseover = function () {
			this.style.backgroundColor = "blue";
		}
		liList[i].onmouseleave = function () {
			changeColor();
		}
	}

	function changeColor() {
		for (var i = 0; i < liList.length; i++) {
			i % 2 == 0 ? 
                liList[i].style.backgroundColor = "red" : 
            	liList[i].style.backgroundColor = "#FFF";
		}
	}
script>
html>