如何使用for循环浏览元素列表并动态设置元素样式?

坦米汉尼法

我实现了一个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>
精氨酸0n

将循环更改为此:

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" : "";
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何循环浏览元素列表

使用Jinja循环浏览时,如何忽略列表中的元素?

如何循环浏览已定义的元素列表

如何循环浏览列表中的元素?

如何使用CSS设置画布元素的样式

如何使用PHP设置HTML元素的样式

如何根据@Input的参数动态设置:host元素的样式?

如何动态设置聚合物元素的样式

如何使用For循环替换列表中的元素

如何使用循环访问嵌套列表的元素

设置动态创建的div元素的样式

动态设置聚合物元素的样式

使用jQuery设置元素样式

如何使用for循环动态设置'div'元素的颜色以匹配在颜色小部件上选择的颜色?

如何使用 Javascript 动态更改“<input>”元素的样式?

如何使用/不使用类名设置元素样式

如何使用外部样式设置自定义Polymer元素的内部元素的样式?

如何动态设置元素的高度?

如何交替设置 4 个元素的样式并使用 css 重复?

如何使用 ID 属性为 css 中的元素设置样式?

如何使用 css 为数组中的每个元素设置样式?

设置动态变化的元素的左位置(循环)

我如何知道浏览器为特定元素设置的光标样式

使用 VUEJS 动态更改元素的样式

如何避免使用动态创建的元素多次循环 - 纯 Javascript

动态生成的样式元素

如何设置已由其父样式设置的嵌套元素的样式

如何使用Thymeleaf动态设置HTML元素的id属性

如何使用JavaScript动态获取和设置SVG元素的ID