базовый курс

ГРУППА КУРСА

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

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

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

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

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

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

Стиль:

+
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
<style>
7
8
9
10
div
  {
  border: 1px solid Red;
  }

HTML код:

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

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

JavaScript:

16
17
var block=document.getElementById('block');
block.style.padding='10px';

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

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

HTML код:

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

JavaScript:

19
20
21
var 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 у первого блока:

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

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

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

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

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

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

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

23
24
var blockst = getComputedStyle(block);
console.log(blockst.borderLeftWidth);

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