Стиль элемента

Установка стиля

Javacript позволяет значительно изменить элемент страницы. В том числе, можно изменить стиль элемента с помощью JavaScript. Можно изменить значения CSS-свойств, которые уже установлены, а также добавить другие CSS-саойства. Это делается через свойство style, которое есть у DOM-объектов. Само это свойство является объектом, который содержит CSS-свойства элемента. Чтобы установить определённое CSS-свойство, нужно обратиться к соответствующему свойству объекта style.

элемент.style.свойство

Имена CSS-свойств совпадают с именами свойств объекта, только пишутся немного по-другому. Если имя свойства состоит из нескольких слов, то в CSS для разделения слов используется дефис. А свойства объекта пишутся по обычным правилам JavaScript, то есть новое слово начинается с большой буквы.

Значением свойства всегда является строка. Значения пишутся так же, как в CSS.

Для примера создадим блок, которому будем устанавлявать свойства:

Стиль:

div
  {
  border: 1px solid Red;
  }

HTML код:

<div id="block">Текст</div>

Теперь установим этому блоку свойство padding:

JavaScript:

let block = document.getElementById('block');
block.style.padding = '10px';

Попробуйте установить блоку другие свойства.

Свойство cssText удаляет все свойства объекта style и заменяет их своими. Значением этого свойства является строка, в которой может быть указано несколько свойств по всем правилам CSS. Для примера создадим ещё один блок, зададим ему свойство, а затем заменим его другими свойствами.

HTML код:

<div id="newblock">Другой блок</div>

JavaScript:

let newBlock = document.getElementById('newblock');
newBlock.style.marginTop = '10px';
newBlock.style.cssText = 'color: Green; font-size: 40px';

Отступ сверху у блока отменён, вместо этого появились другие свойства. А вот рамка у блока осталась, ведь она задана не в объекте style, а с помощью селектора.

Есть ещё один способ изменения стиля - через классы. В стиле создаётся новый класс, ему указываются нужные свойства. А в скрипте объетку просто присваивается этот класс и объект получает свойства класса.

Получение стиля

Элемент страницы не всегда получает CSS-свойства в таком виде, как они написаны. Есть свойства, которые созданы для краткого указания отступов и рамки для всех сторон блока. Например, свойство padding. В браузере эти свойства преобразуются в отдельные свойства для каждой стороны блока. padding преобразуется в padding-top, padding-right, padding-bottom и padding-left. Выведем свойство padding-left у первого блока:

console.log(block.style.paddingLeft); //выведет: 10px

Хотя мы не устанавливали именно это свойство, но оно есть, потому что в таком виде содержится стиль элементов в браузере.

Устанавливать стиль можно с помощью любых CSS-свойств. А вот получать нужно отдельные свойства для каждой стороны блока. Если получить свойство, устранавливающее стиль со всех сторон блока, то результат может в разных браузерах быть разный.

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

getComputedStyle (элемент, псевдоэлемент);

псевдоэлемент - используется для получения свойств псевдоэлемента. Необязательный параметр.

Определим свойства блока:

let blockStyle = getComputedStyle(block);
console.log(blockSyle.borderLeftWidth);

Цвет элемента можно указывать в разных системах. Но свойства объектов содержат цвет в системе RGB. Это не зависит от того, как указан цвет, через объект style или с помощью селектора. Результат будет один и тот же. Это несколько усложняет работу с цветом. Если Вам нужно получить цвет элемента и как-то использовать его, то придётся работать со строкой, содержащей ненужные символы.