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 el 17 ago. 2016 a las 1:29
  • si, pero quiero que la clase se le aplique al darle click a un boton
    – David
    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
    el 17 ago. 2016 a las 12:37
  • Tienes razón, corregido.
    – Diego
    el 17 ago. 2016 a las 19:53

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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