cssの実装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行間の色変更</title>
</head>
<link rel="stylesheet" href="reset.min.css">
<style>
.box{
margin:30px auto;
width:400px;
}
.box h3{
margin-bottom:20px;
}
.box li{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
border-bottom:1px dashed #eee;
line-height:36px;
}
.box li:nth-child(even){
background:#f6f7fb;
}
.box li:hover{
background:pink;
}
</style>
<body>
<div class="box">
<h3> </h3>
<ul class="list">
<li>js，js, Who are you, will you, will you, js, Who are you, will you, js, Who are you, will you, js, Who are you, will you, js, Who are you, will you, js, Who are you, will you, js, Who are you, will you, js, Who are you, will you, js, Who are you, will you, js, Who are you, will you, js, Who are you, will you, js</li>
<li>jQ，あなたは誰？</li>
<li>HTML，あなたは誰？</li>
<li>CSS，あなたは誰？</li>
<li>node，あなたは誰？</li>
<li>webpack，あなたは誰？</li>
<li>ajax，あなたは誰？</li>
</ul>
</div>
</body>
</html>
jsの実装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行間の色変更</title>
</head>
<link rel="stylesheet" href="reset.min.css">
<style>
.box{
margin:30px auto;
width:400px;
}
.box h3{
margin-bottom:20px;
}
.box li{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
border-bottom:1px dashed #eee;
line-height:36px;
}
</style>
<body>
<div class="box" >
<h3> </h3>
<ul class="list" id="box" >
<li>js，js, Who are you, will you, will you, js, Who are you, will you, js, Who are you, will you, js, Who are you, will you, js, Who are you, will you, js, Who are you, will you, js, Who are you, will you, js, Who are you, will you, js, Who are you, will you, js, Who are you, will you, js, Who are you, will you, js</li>
<li>jQ，あなたは誰？</li>
<li>HTML，あなたは誰？</li>
<li>CSS，あなたは誰？</li>
<li>node，あなたは誰？</li>
<li>webpack，あなたは誰？</li>
<li>ajax，あなたは誰？</li>
</ul>
</div>
<script>
//オプション1: マウスオーバー、カスタム属性の削除
let box=document.getElementById("box"),
liList=box.getElementsByTagName("li");
//1.偶数行のカラー・プログラミング#f6f7fb
for(var i=0;i<liList.length;i++){
var item = liList[i],
bg=item.style.backgroundColor ;
bg = '#FFF';
if(i%2!==0){
item.style.backgroundColor="#f6f7fb";
}else{
liList[i].style.background="#fff";
}
item.My=bg;
//2.マウスオーバー時の背景色をピンクにする
item.onmouseover=function () {
this.style.backgroundColor='pink';
}
//3.マウスオーバーまたは色
item.onmouseout=function () {
this.style.backgroundColor=this.My;
}
}
</script>
<script>
//オプション2：ブロックレベルのスコープを設定する
let box=document.getElementById("box"),
liList=box.getElementsByTagName("li");
//1.偶数行のカラー・プログラミング#f6f7fb
for(let i=0;i<liList.length;i++){
let item = liList[i],
bg=item.style.backgroundColor ;
bg = '#FFF';
if(i%2!==0){
bg="#f6f7fb";
}else{
bg="#fff";
}
item.My=bg;
//2.マウスオーバー時の背景色をピンクにする
item.onmouseover=function () {
this.style.backgroundColor='pink';
}
//3.マウスオーバーまたは色
item.onmouseout=function () {
this.style.backgroundColor=this.My;
}
}
</script>
<script>
//オプション2：ブロックレベルのスコープを設定する
let box=document.getElementById("box"),
liList=box.getElementsByTagName("li");
//1.偶数行のカラー・プログラミング#f6f7fb
for(var i=0;i<liList.length;i++){
(function (i) {
var item = liList[i],
bg = '#FFF';
i % 2 === 1 ? bg = '#f6f7fb' : null;
item.style.backgroundColor = bg;
//2.マウスオーバー時の背景色をピンクにする
item.onmouseover=function () {
item.style.backgroundColor='pink';
}
//3.マウスオーバーまたは色
item.onmouseout=function () {
item.style.backgroundColor=bg;
}
})(i)
}
</script>
</body>
</html>
