JSの隔行変色
15979 ワード
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>