Inline стилове

Най-важното за inline стиловете в JavaScript

Inline стиловете позволяват да променяш визията на HTML елемент директно чрез JavaScript, без да добавяш клас или ID. Това е особено удобно за стилове, които се променят динамично. Достъпът става през свойството style на елемента, като CSS свойствата се изписват в camelCase. Алтернативно можеш да използваш cssText, за да пишеш стиловете със стандартния CSS синтаксис.

Стъпка по стъпка: промяна на стил на h1

1. Избери елемент, например h1, чрез JavaScript.
2. Достъпи неговото свойство за стилове чрез .style.
3. Задай цвят на фона чрез camelCase запис:

element.style.backgroundColor = "red";

1. За CSS свойства с тире използвай camelCase:

border-top-width → borderTopWidth

1. Алтернативно използвай:

element.style.cssText = "background-color: green; border: 1px solid blue;";

Тук можеш да пишеш стиловете със стандартния CSS синтаксис и да зададеш няколко свойства наведнъж.

Основни свойства и подходи

• element.style – достъп до inline стиловете на даден елемент
• backgroundColor – задава цвят на фона (camelCase версия на background-color)
• borderTopWidth – пример за преобразуване от тире към camelCase
• cssText – позволява задаване на множество CSS правила като текст със стандартен CSS синтаксис

Този подход е изключително полезен при динамични интерфейси, където стиловете се променят според действията на потребителя.