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

Ответы
Аватар пользователя Вячеслав Межуревский

Для изменения уже определенного значения одного из свойств 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";
}
0 0
Добавьте ваш ответ

Рекомендуемые курсы

полифиллы
AJAX
события
селекторы
20 часов
Посмотреть
состояние
JSX
компоненты
производительность
26 часов
Посмотреть
классы
инкапсуляция
контекст
прототипы
15 часов
Посмотреть