Tengo una pestaña de configuración en mi aplicación web, esta pestaña aunque esta sencilla y básica debería permitir al usuario acomodar como el quiera su interfaz, y lo que pasa es que tengo un color chooser en donde puedes elegir una tonalidad de color dentro de esa pestaña y ese color se le debe asignar a la letra del elemento que en cuestión esta escogiendo, esto ya lo realiza pero solo con un elemento y puedo hacerlo para los demás pero eso implica mucho código ya que necesitaría hacerlo para cada menú que tuviera en este caso serian 7 menús o submenus.
Aqui esta mi codigo actual del Menu en Html
<div class="content" style="background-color: transparent;border-radius: 30px;">
<ul id="sdt_menu" class="sdt_menu" style="margin-top: -30px;position: fixed;z-index: 1000;width: 100%;">
<li >
<a onclick="Inicio()" id="menu" >
<img src="../Imagenes/images/inicio.jpeg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link" id="texto">Inicio</span>
<span class="sdt_descr">Mira Nuestros Videos Introductorios</span>
</span>
</a>
</li>
<li >
<a id="menu2" >
<img src="../Imagenes/images/videos.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap" >
<span class="sdt_link" id="texto">Videos</span>
<span class="sdt_descr">Mira los Mejores mejores Videos</span>
</span>
</a>
<div class="sdt_box">
<a onclick="Videos()">Propios</a>
<a onclick="foraneos()">Foraneos</a>
</div>
</li>
<li >
<a id="menu3">
<img src="../Imagenes/images/podcast.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Podcast</span>
<span class="sdt_descr">Escucha nuestros audios</span>
</span>
</a>
<div class="sdt_box">
<a onclick="podcast()">Propios</a>
<a onclick="foraneos2()" >Foraneos</a>
</div>
</li>
<li >
<a onclick="articulos()" id="menu4" >
<img src="../Imagenes/images/articulos.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Articulos</span>
<span class="sdt_descr">Observa nuestros articulos Redactados</span>
</span>
</a>
</li>
<li >
<a id="menu5" >
<img src="../Imagenes/images/comunidad.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Comunidad</span>
<span class="sdt_descr">Unete a nuestra Comunidad</span>
</span>
</a>
<div class="sdt_box">
<a onclick="foro()">Foro</a>
<a onclick="chat()">Chat</a>
<a onclick="explicito()">Juegos</a>
</div>
</li>
<li >
<a id="menu6" >
<img src="../Imagenes/images/descargas.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Descargas</span>
<span class="sdt_descr">observa nuestros elementos de Descarga</span>
</span>
</a>
<div class="sdt_box">
<a onclick="libros()">Libros</a>
<a onclick="peliculas()">Peliculas</a>
<a onclick="comics()">Comics y Mangas</a>
</div>
</li>
<li >
<a id="menu7" >
<img src="../Imagenes/images/usuario.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Usuario</span>
<span class="sdt_descr">Bienvenido</span>
</span>
</a>
<div class="sdt_box">
<a onclick="perfil()">Perfil</a>
<a onclick="configuracion()">Configuracion</a>
<a onclick="cerrar()">Cerrar Sesion</a>
</div>
</li>
</ul>
</div>
<div>
</div>
En esta parte de acá abajo obtengo los id de los elementos que quiero
<script>
var e = document.getElementById("menu");
var e2 = document.getElementById("menu2");
var e3 = document.getElementById("menu3");
var e4 = document.getElementById("menu4");
var e5 = document.getElementById("menu5");
var e6 = document.getElementById("menu6");
var e7 = document.getElementById("menu7");
var e8 = document.getElementById("texto");
</script>
Y en la siguiente función realizo la asignación del nuevo estilo elegido
function myFunction() {
var color = document.getElementById("myColor1").value;
parent.my_var.style.backgroundColor = color;
var color2 = document.getElementById("myColor").value;
var elemento = window.parent.frames[0].e;
var elemento2 = window.parent.frames[0].e2;
var elemento3 = window.parent.frames[0].e3;
var elemento4 = window.parent.frames[0].e4;
var elemento5 = window.parent.frames[0].e5;
var elemento6 = window.parent.frames[0].e6;
var elemento7 = window.parent.frames[0].e7;
elemento.style.backgroundColor = color2;
elemento2.style.backgroundColor = color2;
elemento3.style.backgroundColor = color2;
elemento4.style.backgroundColor = color2;
elemento5.style.backgroundColor = color2;
elemento6.style.backgroundColor = color2;
elemento7.style.backgroundColor = color2;
var color3 = document.getElementById("myColor2").value;
parent.pie.style.backgroundColor = color3;
var color4 = document.getElementById("myColor3").value;
var elemento8 = window.parent.frames[0].e8;
elemento8.style.color = color4;
}
Claro que aquí ya hay diferentes estilos elegidos en diferentes elementos, pero en este caso como ya había dicho quiero maximizar código y evitar desperdiciar espacio en lineas de código, por tal motivo busco traerme todos los menús en una sola variable para después en otra linea asignarle el mismo color a todos los menús, ya que de la forma actual solo se cambia de color un menú y no sabría como realizar de la manera que quiero.
div
, tengan una clase llamadacuadrado