有很多个div 用js怎么让偶数的是一个颜色 基数又是另一个颜色
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了有很多个div 用js怎么让偶数的是一个颜色 基数又是另一个颜色相关的知识，希望对你有一定的参考价值。
参考技术A $("table tr:even") .css() 这是奇数 在css 里面加样式$("table tr:odd") .css() 这是偶数 在css 里面加样式 参考技术B 先找到它们，用数组装起来。getElementsByTagName或者getElementsByName()或者其他，如果用jquery就更简单了。
然后遍历数组。数组下表为偶数的一个颜色，基数的一个颜色，循环中设置
js 如何设置奇数行和偶数行的背景颜色?
使用jquery的伪类选择器，例如$("选择器 :odd").css("background","#0f0");//奇数行
$("选择器 :even").css("background","#ff0");//偶数行
若是用原生js就要判断，例如
for(var i = 0; i < 元素行数; i++)
if(i%2 == 0)
//奇数行代码
else
//偶数行代码
而且用css也可以添加奇偶数行的样式，例如元素为tr的奇偶设置
tr:nth-child(odd)background:#0f0;
tr:nth-child(even)background:#ff0;
nth-of-type伪类选择器也能实现此效果。 参考技术A <html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>javascript
practice</title>
<script type="text/javascript"
src="jquery-1.8.0.min.js"></script>
<style type="text/css">
tablewidth:300px;
captionbackground:#DCA;
thbackground:#FCA;width:50%;
tdtext-align:center;
</style>
<script type="text/javascript">
$(document).ready(function()
odd= "background":"#EDA","color":"#3F5";//奇数样式
even="background":"#2DA","color":"#875";//偶数样式
odd_even("#table_test",odd,even);
);
function
odd_even(id,odd,even)
$(id).find("tr").each(function(index,element)
if(index%2==1)
$(this).css(odd);
else
$(this).css(even);
);
</script>
</head>
<body>
<table
id="table_test">
<caption>标题<caption>
<tr>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>张</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>张</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>张</td>
<td>李</td>
</tr>
<tr>
<td>张</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr></li>
</body>
</html>
自己试试就知道了
以上是关于有很多个div 用js怎么让偶数的是一个颜色 基数又是另一个颜色的主要内容，如果未能解决你的问题，请参考以下文章