首页 > 代码库 > 几种实现隔行换色的写法（1中css其余js）
几种实现隔行换色的写法（1中css其余js）
第一种：
<!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>
几种实现隔行换色的写法（1中css其余js）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。