How to apply the same CSS style to different elements through Javascript?

Question

How to apply the same CSS style to different elements through Javascript?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I have a configuration tab in my web application, this tab, although simple and basic, should allow the user to adapt his interface as he wants, and what happens is that I have a chooser color where you can choose a color tonality inside of that tab and that color should be assigned to the letter of the element in question is choosing, this is done but only with one element and I can do it for others but that implies a lot of code since I would need to do it for each menu I had in this case there would be 7 menus or submenus.

Here is my current menu code in 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>

In this part of here below I get the id of the elements I want

<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>

And in the next function I make the assignment of the new chosen style

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

Of course there are already different styles chosen in different elements, but in this case as I said I want to maximize code and avoid wasting space in lines of code, for that reason I try to bring all the menus in a single variable and then in another line to assign the same color to all the menus, since in the current form only one menu changes color and I would not know how to perform the way I want.

javascript html5 css

asked by David 17.08.2016 в 03:09

source

3 answers

Error "User does not have sufficient privileges or object not found" Unexpected end in getLocalHost with InetAddress

score 1 · Answer 1

Well, if it's just that, this can help you, this is using jquery, I do not know if you're using the library, so I'll leave the example.

html

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

javascript

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

score 1 · Answer 2

To add a class to several elements you can do the following:

You put the same name to all the elements that you want to add the class to. And you get the elements according to the attribute name and you assign the new class. This will not replace the current class but will be added as a new one.

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

Or you can add classes independently for each element like this:

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

The first variant I have not tried, but the second one has, and it has worked for me.

score 0 · Answer 3

I think what you want is an array

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

and then according to your 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;
    }
}