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

Можно как через 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');
})

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

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

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

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

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