Давайте теперь научимся добавлять CSS стили
элементам. Это делается путем изменения атрибута
style.
К примеру, чтобы поменять цвет, нужно построить
следующую цепочку: elem.style.color,
и присвоить ей нужное значение цвета.
Посмотрим на примере. Пусть у нас есть вот такой элемент:
<p id="elem">text</p>
Сделаем этот элемент красного цвета:
let elem = document.querySelector('#elem');
elem.style.color = 'red';
Дан див и кнопка. По клику на кнопку добавьте диву ширину, высоту и границу.
Свойства с дефисом
Свойства, которые записываются через дефис,
например font-size,
преобразуются в camelCase. То есть font-size
станет fontSize:
elem.style.fontSize = '20px';
Дан див с текстом и кнопка. По клику на кнопку
установите диву размер шрифта в 20px,
а также верхнюю границу и фон.
Исключение
Свойство float
является исключением, так как оно является
специальным в JavaScript. Для него следует
писать cssFloat:
elem.style.cssFloat = 'right';
Дан список ul
и кнопка. По клику на кнопку добавьте тегам
li свойство float в значении
left.