Как изменить свойство класса css через js
Ответы
Вячеслав Межуревский
04 октября 2022
Для изменения уже определенного значения одного из свойств 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
2