Как изменить свойство класса CSS через JS?

Question

[Finx]

Имеется 2 класса со свойствами

.header_nav_box {
      height: 190px;
 }
.header_box {
      height: 100px;
 }

Так же имеется кнопка

<input type="checkbox" name="menu" id="btn-menu" />

Как с помощью JS сделать так, что бы при нажатии на кнопку свойства классов становились?:

.header_nav_box {
      height: 150px;
 }
.header_box {
      height: 200px;
 }

Можно ли это сделать через тот же onclick или нет?

Answer 1

[Nevada18]

можно написать добавочный класс и по клику переключать его на элементе

Answer 2

[Роман Ямчук]

Можно как через click, так и через change

<input type="checkbox" name="menu" id="btn-menu" />
<div>
  <header>header
    <nav>box</nav>
  </header>
</div>

$('#btn-menu').change(function() {
    $('header').toggleClass('header_box');
    $('nav').toggleClass('header_nav_box');
})

Answer 3

[Negwereth]

Вы не можете изменить уже описанный класс, так как он фиксирован в CSSOM. Именно класс, так как он может быть применён ко многим элементам.

Но вы можете описать дополнительные классы, в которых значения нужных вам свойств будут иметь нужные вам значения и добавлять их к нужным элементам в нужный момент, например, при нажатии. addEventListener, classList

Но при этом вам нужно следить за весом селектора, чтобы нужное вам правило применилось в правильном порядке и перезаписало нужные вам свойства. Selector, selector specificity.

Answer 4

[Артем Спиридонов]

Легко. Сколько угодно.

document.write('<style>');
document.write('.some_class{some_property: some_value};');
document.write('</style>');