Как Применять тот же Стиль CSS к различным элементам посредством Javascript?

У меня есть закладка конфигурации в моем Веб приложении, эта закладка, хотя она простая и основная он был бы должен позволять пользователю размещать как quiera Ваш интерфейс, и то, что он перемещает, состоит в том, что у меня есть цвет chooser, где ты можешь выбирать тональность цвета внутри этой закладки, и этот цвет должен быть распределенным в букву элемента, который в вопросе он выбирает, это уже это реализует, но только с элементом и я могу делать это для остальных, но это подразумевает много код, так как он нуждался бы в том, чтобы сделать это для каждого меню, которое у него было в этом случае, их было бы 7 меню или субменю.

Здесь находится мой настоящий код Меню в 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>

В этой части здесь внизу я получаю они пойдите элементов, которые я хочу

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

И в следующей функции я реализую ассигнование нового избранного стиля

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

Ясный, что здесь уже есть различные стили, выбранные в различных элементах, но в этом случае как уже он сказал, что я хочу максимизировать код и избежать проматывать место в линиях кода, в пользу такого мотива я ищу приносить все меню в единственной переменной для после в другой линии распределять ему тот же цвет во все меню, так как настоящей формы только меняет цвет меню, и он не знал бы, как реализовывать способа, который я хочу.

1
задан 17.08.2016, 04:29
3 ответа

Чтобы добавлять класс к нескольким элементам ты можешь делать следующее:

Ты помещаешь ему того же самого name во все элементы, что ты захотел добавить класс. И ты получаешь элементы как признак name и ты распределяешь ему новый класс. Это не заменит настоящий класс но он будет добавлен как новость.

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

Или ты можешь добавлять классы независимой формы для каждого такого элемента:

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

Я не протестировал первый вариант, но вторая да, и оно я функционировало.

1
ответ дан 24.11.2019, 13:38

Хороший, если одинокое это, это может подавать тебя, это используя jquery, не, если ты использовал книжный магазин, таким же образом я буду оставлять тебе пример

html

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

javascript

$("#boton_clase").on('click', function(){
   $( "p" ).addClass( "myClass yourClass" );
});
1
ответ дан 24.11.2019, 13:38

Мне кажется, что то, что ты хочешь, является array

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

и потом segГєn твой рукописный шрифт

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

    for (var i = 0; i < elementos.length; i++) {
        elemento[i].style.backgroundColor = color;
    }
}
0
ответ дан 24.11.2019, 13:38
  • 1
    Чтобы показывать м и # 225; s от селектора они должны отделяться с запятыми и не с местом в мишени. Иначе быть и # 225; s выбирая что-то полностью различное. – Alvaro Montoro♦ 17.08.2016, 15:37
  • 2
    У тебя есть raz и # 243; n, исправленный. – Diego Torres 17.08.2016, 22:53

Теги

Похожие вопросы