Как изменить свойство класса css через js

4 года назад

Человек-Молекула

Ответы

Для изменения уже определенного значения одного из свойств css-класса элемента, можно воспользоваться следующим примером:

Исходный HTML документ

<style>
 <!--Добавим стилей для элемента которые будем менять-->
  .box {
    width: 75px;
    height: 75px; 
    background-color: #444;
  }
</style>
<body>
    <div class="box"></div>
    <button onClick="changeColor();">Change color</button>
    <button onClick="addWidth();">Add width</button>
</body>

в секции со скриптами HTML документа, надо добавить определение указанных функций на кнопках со следующей логикой:

cоnst chаngeColor = () => {
  // Выбираем элемент на странице, получаем доступ к списку стилей и меняем нужному значение.
  documеnt.getElementsByClassName('box')[0].stylе.backgroundColor = "#38d9a9";
}
cоnst аddWidth = () => {
  documеnt.getElementsByClassName('box')[0].stylе.width = "175px";
}

4 года назад

Вячеслав Межуревский

10 месяцев·С нуля

Фронтенд-разработчик

Изучите HTML, CSS, JavaScript и React