如何使用for循环循环遍历元素列表并动态设置元素样式？

Question

我已经实现了一个 for 循环以在单击一个时突出显示颜色小部件选项，但是我只想突出显示被单击的那个，其余的没有任何边框突出显示。我将如何通过对下面的代码稍作改动来解决这个问题？必须实现一个for循环和纯javascript.

<html>
<head>
<meta charset="utf8" />
<title></title>
<script>
function changeColor(e) {
document.getElementById("page").className = e;

var i;
var x = document.getElementById("page");

for (i = 0; i < 5; i++)


if (document.getElementById("page").className = e ){
x.getElementsByTagName("li")[i].style.borderColor = "red";
}
}
</script>
</head>

<body>

<div id="page" class=""><!-- start page wrapper -->

<hr />

<div id="theme-picker">
<h2>Theme Picker</h2>
<p>Select a theme from the options below:</p>
<div id="palette">
<ul>
<li class="midnight" onClick="changeColor('midnight')">Midnight</li>
<li class="matrix" onclick="changeColor('matrix')">Matrix</li>
<li class="peardrop" onclick="changeColor('peardrop')">Peardrop</li>
<li class="skylight" onclick="changeColor('skylight')">Skylight</li>
<li class="sunset" onclick="changeColor('sunset')">Sunset</li>
</ul>
<div class="clearfix"></div>


<hr />



</div><!-- /page -->

</body>
</html>

Answer 1

将循环更改为：

var i;
var x = document.getElementById("palette");
var items = x.getElementsByTagName("li");

for (i = 0; i < items.length; i++){
    var item = items[i];
    item.style.borderColor = item.className == e ? "red" : "";
}

如何使用for循环循环遍历元素列表并动态设置元素样式？

how to use for loop to cycle through lists of elements and set an elements style dynamically?

javascript

html

css