Изменение класса css из javascript

Установите height в javascript вместо использования variables

document.getElementById('root').style.height=window.innerHeight +'px';

См. Пример:

 document.getElementById('root').style.height=window.innerHeight +'px';

#root{
background-color:red;
}

<div id = "root"></div>

Для вашего редактирования no use js используйте height:100vh;:

#root{
height:100vh;
background-color:red;
}

<div id = "root"></div>

В современных браузерах можно использовать:

document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyOtherClass');

Хотя для выполнения вашего конкретного случая я бы пошел с ответом לבני מלכה.

Для нормальных JS

function addClassById (_id,_class) {
  document.getElementById(_id).classList.add(_class);
}

function removeClassById (_id,_class) {
  document.getElementById(_id).classList.remove(_class);
}

addClassById("root","newClass")

Я советую вам использовать JQUERY, он очень прост в использовании. Поместите эту ссылку cdn в тег заголовка и используйте ее.

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

//This is for change css
$("#root").css({
"background-color": "yellow", 
"font-size": "200%"
});



 // This is how to add class
$("#root").addClass('newClass');





// This is how to remove class
 $("#root").removeClass('newClass')

Надеюсь, это вам поможет.

Возможно, вместо этого используйте правильный CSS:

window.innerHeight +'px' дает ту же высоту, что и 100vh. Единица vh означает «высоту окна просмотра», а 100vh - полную высоту внутреннего окна.

См .: https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

использование устройства vh - правильный способ сделать это .. (хотя Махбуб Мохаммади сказал, что он несовместим с ios) height: 100vh; - это панорама во всю высоту ..