几种实现隔行换色的写法（1中css其余js）
浏览数：58 /
时间：2015年06月09日
第一种：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隔行变色</title>
<style>
*{
margin:0;
padding:0;
}
div{
margin:0 auto;
width:80%;
height:30px;
border:1px solid #000;
cursor: pointer;
}
.yellow{
background-color: yellow;
}
.red{
background-color: red;
}
.black{
background-color: black;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<script>
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].index = i;
if(i%2==0){
divs[i].className = "red";
}else{
divs[i].className = "yellow";
}
divs[i].onmouseover = function(){
this.className = "black";
}
divs[i].onmouseout = function(){
if(this.index%2==0){
this.className = "red";
}else{
this.className = "yellow";
}
}
}
</script>
</body>
</html>
第二种：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行变色03</title> <style> *{ margin:0; padding:0; } div{ margin:0 auto; width:80%; height:30px; border:1px solid #000; cursor: pointer; } .yellow{ background-color: yellow; } .red{ background-color: red; } .black{ background-color: black; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <script> var divs = document.getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { if(i%2==0){ divs[i].className = "red"; }else{ divs[i].className = "yellow"; } divs[i].onmouseover = function(){ this.style.backgroundColor = "#000"; } divs[i].onmouseout = function(){ this.removeAttribute("style"); } } </script> </body> </html>
第三种：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行变色04</title> <style> *{ margin:0; padding:0; } div{ margin:0 auto; width:80%; height:30px; border:1px solid #000; cursor: pointer; } .yellow{ background-color: yellow; } .red{ background-color: red; } .black{ background-color: black; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <script> var divs = document.getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { divs[i].index = i; if(i%2==0){ divs[i].className = "red"; }else{ divs[i].className = "yellow"; } divs[i].addEventListener("mouseover",over,false); //这个特色就是事件监听机制 divs[i].addEventListener("mouseout",out,false); function over(){ this.className = "black"; } function out(){ if(this.index%2==0){ this.className = "red"; }else{ this.className = "yellow"; } } } </script> </body> </html>
第四种：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行变色05</title> <style> *{ margin:0; padding:0; } div{ margin:0 auto; width:80%; height:30px; border:1px solid #000; cursor: pointer; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <script> var divs = document.getElementsByTagName("div"); var oldColor; for (var i = 0; i < divs.length; i++) { if(i%2==0){ divs[i].style.backgroundColor = "red"; }else{ divs[i].style.backgroundColor = "yellow"; } divs[i].onmouseover = function(){ oldColor = this.style.backgroundColor; //这里的这个中间变量是这个方法的亮点 this.style.backgroundColor = "#000"; } divs[i].onmouseout = function(){ this.style.backgroundColor = oldColor; } } </script> </body> </html>
第五种：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行变色02</title> <style> *{ margin:0; padding:0; } div{ margin:0 auto; width:80%; height:30px; border:1px solid #000; cursor: pointer; } .yellow{ background-color: yellow; } .red{ background-color: red; } div:hover{ background-color: black; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <script> //其实要是想用伪类的话，可以单纯用html和css就能做出隔行变色的效果 var divs = document.getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { if(i%2==0){ divs[i].className = "red"; }else{ divs[i].className = "yellow"; } } </script> </body> </html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
