Контроль изменений объекта с помощью CSS

266

04 апреля 2017, 11:11

Всем привет. На сайте есть изменяющийся под нужды пользователя блок. (тыкнул на кнопку, размеры должны измениться, внешний вид тоже) если делать это с помощью 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-ти. Правила для всех разные.

Answer 1

Я предлагаю типа такого:
codepen

$blockOutter = document.querySelector('.blockOutter'); 
 
function changeClass() { 
  $blockOutter.classList.toggle("ches"); 
}; 
 
$blockOutter.addEventListener('click', changeClass);

.blockOutter { 
  width: 200px; 
  height: 200px; 
  background-color: orangered; 
} 
 
.blockOutter .blockInner { 
  width: 100px; 
  height: 100px; 
  background-color: red; 
} 
 
.blockOutter.ches { 
  background-color: blue; 
} 
 
.blockOutter.ches .blockInner { 
  background-color: lightblue; 
}

<div class="blockOutter"> 
  <div class="blockInner"></div> 
</div>

Посмотри на js. Мы добавляем класс к родителю и как только это мы сделали, браузер запускает перерасчет стилей и встречает уже заранее заданные стили для этого класса. Таким образом мы ссылаемся на стили для внутренних элементов через заданный класс для родителя, ведь стили для элемента, у которого есть класс, имеют больший вес. Поэтому применяются конкретно они заместо стандартных.
На этот счет советую поискать про то, какие селекторы какой вес имеют для отрисовки их браузером. Запомнить их сложно, поэтому ты сам видишь, что я тоже плаваю тут, но держать в голове и знать как оно работает, необходимо в любом случае.

В данном примере я просто меняю цвет бекграунда, но ты можешь любые стили переписать в "классовом" селекторе, какие тебе нужны.

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как скрыть меню поверх фрейма

У меня на странице есть iframe с видео с YouTube, и есть фиксированный хедер, который при перемещении по странице скрывается и появляетсяКогда открываю...

276

CSS