Javascript-форум - Присвоение класса и передача свойств

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Присвоение класса и передача свойств (https://javascript.ru/forum/dom-window/74557-prisvoenie-klassa-i-peredacha-svojjstv.html)

рони,
что не понятно .green ниже всех он и задает цвет фона,
class="gray green fuchsia" // тут порядок значения иметь не будет

<head>
    <title></title>
    <style>
        .gray
        {
            background-color: Gray !important;
        }
        .fuchsia
        {
            background-color: Fuchsia !important;
        }
        .green
        {
            background-color: Green !important;
        }
    </style>
</head>
<body>
<div id="id1"  class="gray green fuchsia">red</div>
</body>

или что вы имеете ввиду под первый добавленный?

j0hnik,
ок тег спутал с атрибутом
вы правы, срабатывает класс добаввленный последним в css.

я так понял, что переключение поочередное не получится сделать. Через input type=radio тоже не получается. Приходится повторно жать и только потом следующую (

Подскажите еще, как вывести выбранные классы в блок bSres с той же структурой, как и в css? Например, если я щелкну на класс three я смог скопировать код целиком, т.е. так:

<div class="bsm three"></div>
<style>
.bSm {
  display: block;
  background: #fff;
  width: 150px;
  height: 150px;
  border-radius: 8px;
  margin: 0 auto;
}
.three {
  width: 267px;
  height: 553px;
  border-radius: 18px;
}
</style>

Цитата:

Сообщение от madeas

я так понял, что переключение поочередное не получится сделать.

при желании можно, пост №8 немного доработать

Цитата:

Сообщение от madeas

Через input type=radio тоже не получается

где код?

рони,
да там все тоже самое только вместо button стоит input. Осталось вывести классы со стилями в контейнер. С остальным вроде понял куда двигаться.

madeas,
добавление только одного класса, с возможностью отмены.

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
$(function() {
    var b = $('.btn');
    b.click(function() {
    var that = this;
    b.each(function() {
    var cls = $(this).data("cls");
    that == this ? $('.bSm').toggleClass(cls) : $('.bSm').removeClass(cls)
    });
});
});
    </script>
</head>

<body>
<style>
body{
        background-color: #EEE8AA;
}

.bSm {
    display: block;
    background: #fff;
    width: 150px;
    height: 150px;
    border-radius: 8px;
    margin: 0 auto;
}
.two {
    width: 450px;
    height: 675px;
    border-radius: 38px;
}
.three {
    width: 267px;
    height: 553px;
    border-radius: 18px;
}
</style>
<div class="bSm"></div>

<button  class="btn" data-cls="two">2</button>
<button  class="btn" data-cls="three">3</button>



<div class="bSres"></div>

</body>
</html>

рони,
я сделал по примеру Dilettante_Pro, все переключается. Но не могу понять, классы меняются или просто добавляются следом.

Dilettante_Pro,
Все работает, код настроил как надо. Спасибо. А как можно вывести полученные классы и стили в input?

Вот сам контейнер https://jsfiddle.net/7zuqrb8o/ В нем 4 инпута, 2 отвечают за размер, другие 2 за цвет.
Нужно, чтобы в результате появились добавленные стили. Например, если я нажму 1 и 4, то в результате у меня должно отразиться как-то так:

#bSm {
  display: block;
  width: 200px;  /* присвоено новое значение. изначально было 100 */
  height: 150px; /* присвоено новое значение. изначально было 100  */
  margin: 0 auto;
  background-color: #333; /* добавлен 4 */
   color: #fff; /* добавлен 4 */
}

Думаю, что надо через form_code.innerHTML =+, но я пока не представляю как это лучше сделать.