Всем привет. На сайте есть изменяющийся под нужды пользователя блок. (тыкнул на кнопку, размеры должны измениться, внешний вид тоже) если делать это с помощью JS:
function resize680(){
$('.cell').addClass('ches680');
$('.ches').addClass('ches680');
$('.Table').css({'width':'0','height':'0'});
$('.Table').css({'width': '680px', 'height': '680px', 'margin':'0 auto'});
....
....
}
function resize1000(){
$('.ches').addClass('ches1000');
$('.Table').css({'width':'0','height':'0'});
$('.Table').css({'width': '1000px', 'height': '1000px', 'margin':'0 auto'});
....
....
}
Все работает стабильно, но требуется сделать все с помощью CSS и минимальным участием JS. Вопрос: существует ли в CSS конструкция аналогичная:
switch (activeClass) {
case Size680:
style1{
...
}
style2{
....
}
break;
case Size1000:
style1{
...
}
style2{
....
}
break;
}
Таким образом я с помощью JS меняю только активный класс и для него будут подтягиваться нужные стили. Не кидайте в меня камнями пожалуйста ели это бредовая идея. Заранее благодарен за любую помощь.
Уточняю задачу:
На этом изображении блок по умолчанию. Выделенные зеленым блоки это правила, которые меняются в зависимости от размера(я предполагаю, что возможно заказчик захочет еще что-то добавить).
Тут изображение с блоком меньшего размера. Я не мастер верстки, так что выглядит это не очень. Таких размеров около 5-ти. Правила для всех разные.