Передать значение переменной JS в стиль CSS

Допустим, нужно передать диву ширину, значение которой вычисляется в JS.

<div class="example"></div>

классу example мы ,к примеру, присвоим ширину из переменной example, которая равна 70%

Что бы передать значение стиля элементу, нужно обратиться к элементу, использовать функцию style и там прописывать, что именно вы хотите менять

Вариант 1:

Стиль применяется напрямую через названия переменных.

Пример:

Что бы установить width, я буду писать obj.style.width

<script>
var example = 70;
document.querySelector('#score').style.width = example + '%';
</script>
<style>
#example {
height: 100px;
background-color: red;
}
</style>
<div id="example"></div>

Вариант 2:

Стили применяются через переменные из CSS

Пример:

Что бы установить width, я буду прямо писать obj.style['width']

	
<script>
var example = 70;
document.querySelector('#example').style['width']= example + '%';
</script>
<style>
#example {
height: 100px;
background-color: red;
}
</style>
<div id="example"></div>