1

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.

2
  • 1
    En teoría lo que quieres es agregar las clases a etiquetas, por ejemplo las etiquetas div, tengan una clase llamada cuadrado Commented el 17 ago. 2016 a las 1:29
  • si, pero quiero que la clase se le aplique al darle click a un boton
    – David
    Commented el 17 ago. 2016 a las 2:55

3 respuestas 3

1

Bueno si es solo eso esto te puede servir, esto es usando jquery, no se si estes usando la libreria, de igual forma te voy a dejar el ejemplo

html

<button id="boton_clase"></button>
<p>Aqui algun texto</p>

javascript

$("#boton_clase").on('click', function(){
   $( "p" ).addClass( "myClass yourClass" );
});
1

Para agregar una clase a varios elementos puedes hacer lo siguiente:

Le pones el mismo name a todos los elementos que quieras agregarle la clase. Y obtienes los elementos según el atributo name y le asignas la nueva clase. Esto no reemplazará la clase actual sino que se adicionará como una nueva.

document.getElementsByName('name_1').className += "clase_1 clase_2";

O puedes agregar las clases de forma independiente para cada elemento así:

document.getElementsByName('name_1')[0].className += "clase_0 clase_1";
document.getElementsByName('name_1')[1].className += "clase_4";
document.getElementsByName('name_1')[2].className += "clase_2 clase_5";

La primera variante no la he probado, pero la segunda sí, y me ha funcionado.

0

Me parece que lo que quieres es un array

var elementos = document.querySelectorAll("#menu, #menu2, #menu3, #menu4, #menu5, #menu6, #menu7, #texto");

y luego según tu script

function myFunction() {
    var color = .... 
    var elementos = window.parent.frames[0].elementos;

    for (var i = 0; i < elementos.length; i++) {
        elemento[i].style.backgroundColor = color;
    }
}
2
  • Para indicar más de un selector se deben separar con comas y no con espacios en blanco. De lo contrario estarás seleccionando algo completamente diferente.
    – Alvaro Montoro
    Commented el 17 ago. 2016 a las 12:37
  • Tienes razón, corregido.
    – Diego
    Commented el 17 ago. 2016 a las 19:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.