用js制作隔行换色

在JavaScript中制作隔行换色（通常称为斑马线效果）主要有几种方法，这些方法主要依赖于操作DOM元素的样式。下面介绍几种常见的方法：

1. 使用for循环遍历并修改样式

这是最直观的方法，通过遍历DOM元素（如表格行<tr>），并基于它们的索引或位置来设置不同的样式。

javascript

document.addEventListener('DOMContentLoaded', function() { 
var rows = document.querySelectorAll('table tr'); 
for (var i = 0; i < rows.length; i++) { 
if (i % 2 === 0) { 
rows[i].style.backgroundColor = '#f2f2f2'; // 偶数行 
} else { 
rows[i].style.backgroundColor = '#ffffff'; // 奇数行 
} 
} 
});

2. 使用CSS伪类:nth-child

虽然这个方法并不直接使用JavaScript，但它是实现隔行换色的推荐方式，因为它更加高效且易于维护。然而，为了回答这个问题，我还是会提及一下如何用JavaScript动态添加这样的CSS规则。

javascript

	document.styleSheets[0].insertRule('table tr:nth-child(even) { background-color: #f2f2f2; }', 0); 

	document.styleSheets[0].insertRule('table tr:nth-child(odd) { background-color: #ffffff; }', 0);

注意：这里假设你有一个样式表在document.styleSheets数组的第一个位置。实际使用时可能需要更复杂的逻辑来确定哪个样式表应该被修改。

3. 使用classList和CSS类

这种方法涉及为奇数行和偶数行分别设置CSS类，并在JavaScript中通过修改这些类的样式来应用不同的背景色。

CSS:

	.even-row { 

	background-color: #f2f2f2; 

	} 


	.odd-row { 

	background-color: #ffffff; 

	}

JavaScript:

	document.addEventListener('DOMContentLoaded', function() { 

	var rows = document.querySelectorAll('table tr'); 

	rows.forEach(function(row, index) { 

	if (index % 2 === 0) { 

	row.classList.add('even-row'); 

	} else { 

	row.classList.add('odd-row'); 

	} 

	}); 

	});

总结

• 如果追求效率和可维护性，推荐使用CSS的:nth-child伪类。
• 如果需要更复杂的逻辑来决定颜色（比如基于数据的颜色变化），则使用JavaScript遍历和修改样式可能更合适。
• 使用classList和CSS类可以使得JavaScript代码和CSS样式保持分离，更易于管理和维护。