时间戳

首页 > 解决方案 > 在循环中更改某些元素的样式

javascript - 在循环中更改某些元素的样式

问题描述

我在布局页面顶部有这个导航栏：

<div id="myTopnav" class="topnav" style="background-color: #030005; background-image: linear-gradient(#270133,#F5F5F5)">
            <a href="#" class="active ">@Session["UserName"].ToString() @Session["UserApe"].ToString()</a>
            <a href="#">Testing A</a>
            <a href="#">Testenado B</a>
            <a href="/Home/Logout">Cerrar Sesion</a>
            <a href="javascript:void(0);" class="icon" onclick="despMenu()"><i class="fa fa-bars"></i></a>
        </div>

这个想法是在我遇到的每个按钮上切换渐变：

window.addEventListener("load",inicializarEventos,false);
function inicializarEventos() {
    var ob1 = document.getElementById("myTopnav");
    var lista = ob1.getElementsByTagName("a");    
    var sw = 1;
    for (var i = 0; i < (lista.length - 1); i++) {
        if (sw == 1) {
            ob1.item(i).style.backgroundImage="linear-gradient(to top ,#270133,#F5F5F5)";            
            sw = 0;
            console.log("Entro a 1")
            break;
        }
        else {
            ob1.item(i).style.backgroundImage = "linear-gradient(to top ,#F5F5F5,#270133)";
            sw = 1;
            console.log("Entro a 2")
             }
      }
}

但是它不起作用。我究竟做错了什么？有更好的方法吗？

标签： javascriptcssajax

解决方案

您的工作 rxample 应如下所示：

window.addEventListener("load",inicializarEventos,false);
function inicializarEventos() {
    var ob1 = document.getElementById("myTopnav");
    var lista = ob1.getElementsByTagName("a");    
    var sw = 1;
    for (var i = 0; i  < lista.length; i++) {
        if (sw == 1) {
            lista[i].style.backgroundImage="linear-gradient(to top ,#270133,#F5F5F5)";            
            sw = 0;
            console.log("Entro a 1")
            break;
        }
        else {
            lista[i].style.backgroundImage = "linear-gradient(to top ,#F5F5F5,#270133)";
            sw = 1;
            console.log("Entro a 2")
             }
      }
}

如上所述，您应该lista[i]用于访问当前对象，如果没有限制，您还应该检查整个列表i < lista.length

推荐阅读