Объект style в JavaScript

Объект style позволяет изменять CSS-стили элементов прямо через JavaScript. С его помощью можно динамически менять цвета, размеры, шрифты и любые другие стили без редактирования CSS-файлов.

Чтобы изменить стили элемента, сначала нужно получить его в JavaScript, а затем обратиться к его свойству style

let element = document.getElementById('myElement'); 
element.style.color = 'red'; 
// Меняем цвет текста на красный

Объект style содержит свойства, соответствующие CSS-стилям. Однако названия записываются в camelCase, а не через дефис - как в обычном css

CSS-свойствоJavaScript
background-colorbackgroundColor = ‘blue’
font-sizefontSize = ‘20px’
margin-topmarginTop = ‘10px’

let box = document.querySelector('.box');

box.style.width = '200px';
box.style.height = '100px';
box.style.backgroundColor = 'yellow';
box.style.border = '2px solid black';

Чтобы удалить стиль, можно присвоить пустую строку

box.style.backgroundColor = ''; 
// Сбросит цвет фона

Объект style позволяет динамически изменять внешний вид элементов. Но если нужно задавать много стилей сразу, лучше использовать classList.add() и classList.remove() для работы с классами.


Home About Links

Text me