Javascript установить css свойство элемента

Работа с CSS через Javascript

Получение всех CSS-свойств элемента ( метод window.getComputedStyle() )

Метод window.getComputedStyle() возвращает объект, содержащий значения всех CSS-свойств элемента после применения всех активных таблиц стилей и завершения базовых вычислений значений, которые они могут содержать.

Синтаксис метода window.getComputedStyle() :

• element — элемент (Element), CSS-свойства которого необходимо получить (вставка узлов, которые не являются элементами, например, #text , выдаст ошибку);
• pseudoElt (необязательный) — строка указывающая на найденный псевдоэлемент (опускается или null — для не псевдоэлементов).

Возвращённый объект style — «живой» объект CSSStyleDeclaration, который обновляется автоматически при изменении стилей элемента, только для чтения и может быть использован для инспектирования стиля элемента (включая описание из элемента или внешней таблицы стилей).

ВАЖНО! Для использования метода window.getComputedStyle() для какого-либо элемента необходимо дождаться загрузки этого элемента (страницы) (используйте window.load или расположите скрипт ниже необходимого элемента).

Использование метода window.getComputedStyle() с псевдоэлементами

Метод getComputedStyle() может получить информацию о стилях из псевдоэлемента (например, ::after , ::before , ::marker , ::line-marker и т.д.):

Управление встроенными стилями элемента

Самый простой способ управления стилями CSS с помощью JS — это манипулирование атрибутом style отдельных элементов документа (подробнее об атрибуте элемента и свойстве элемента). При этом свойство style объекта Element имеет одну отличительную особенность: его значением является не строка, а объект CSSStyleDeclaration. Свойства этого объекта представляют CSS-свойства, определенные в HTML-атрибуте style.

Для нестандартных атрибутов DOM свойство узла как объекта DOM не создаётся.

h3 . style . fontWeight = «bold» ; // свойство, соответствующее атрибуту с дефисом, — через CamelCase

Свойства стиля объекта CSSStyleDeclaration имеют тип всех значений string .

Кроме того, во всех свойствах позиционирования должны быть указаны единицы измерения, например:

Особенности именования свойств объекта CSSStyleDeclaration:

1. Если имя CSS-атрибута содержит дефисы (например, font-size ), имя свойства объекта CSSStyleDeclaration образуется путем удаления дефисов и использования записи формата CamelCase (например, CSS-атрибут border-left-width доступен через свойство borderLeftWidth ).
2. Если CSS-свойство имеет имя, совпадающее с зарезервированным словом языка JavaScript (например, float ), к этому имени добавляется префикс «css». В результате получим свойство cssFloat объекта CSSStyleDeclaration.

Особенности использования свойств объекта CSSStyleDeclaration:

• Атрибут< style>HTML-элемента — это его встроенный стиль, который в целом удобно использовать для начальной установки значений стиля. Однако сценарии JS могут читать свойства объекта CSSStyleDeclaration, только если эти свойства были ранее установлены сценарием на языке JavaScript или если HTML-элемент имеет встроенный атрибут style , установивший нужные свойства, например:

console . log ( h3 . style . position ) ; // пустая строка, свойство не установлено сценарием JS или атрибутом style

Чтение встроенного стиля элемента представляет особую сложность, когда выполняется чтение свойств стиля, имеющих единицы измерения, а также свойств сокращенной формы записи (сценарий должен включать реализацию синтаксического анализа строк с CSS-стилями, чтобы обеспечить возможность извлечения и дальнейшего использования значений). Иногда бывает проще прочитать или записать единственную строку во встроенный стиль элемента, чем обращаться к объекту CSSStyleDeclaration . Для этого можно использовать методы getAttribute() и setAttribute() объекта Element или свойство cssText объекта CSSStyleDeclaration (подробнее. ).

Добавление элементам классов, атрибутов и CSS-стилей (их удаление и проверка наличия)

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

1. cоздать класс в CSS и в HTML как и использовать его;
2. определять стили непосредственно в атрибуте style как .

JavaScript может менять и классы, и свойство style , однако определение и изменение классов – предпочтительный вариант по сравнению с изменением style .

Использование style является приемлемым, если мы вычисляем координаты элемента и хотим установить их из JavaScript, например:

Источник

Изменение CSS свойств с помощью JavaScript

Данная статья пригодится новичкам в веб-программировании. Буду подразумевать, что вам знаком «СИшный» синтаксис, который лежит в основе JavaScript, и получение ссылки на элемент — метод getElementById и сопутствующие — проблем не вызывает. Естественно, основы HTML и CSS вам также должны быть известны.

Для доступа к стилям существует специальное свойство объекта — style. Пусть на странице определён элемент с идентификатором elem:

Тогда, для доступа к его «стилевым» свойствам, можно использовать такой код (не пытайтесь использовать, вырвано из контекста!):

document.getElementById('elem').style.ЦС

где ЦС — то свойство, к которому нужно обратиться или изменить.

Далее начинается пусть небольшая, но магия. Вам известны различные CSS свойства: background , border , display , font-size и т. п. Обратите внимание на последнее, в котором есть символ — (минус на клавиатуре). В названиях переменных такие дефисы использовать нельзя, поскольку в контексте программы они интерпретируются как знак вычитания. Для логического обоснования, маленький пример:

Если бы интерпретатор JavaScript допускал в именах символ минус, ему пришлось бы выполнить дополнительные действия:

1. Проверить существование переменной font-size .
2. Если её нет, попытаться выполнить арифметическое действие «вычитание» значения size из font .

Поэтому, имена свойств требуется «причесать» (нормализовать) для использования в коде. К счастью, определено всего 2 простых правила:

Если знака минус нет (margin, border, width и прочее) — записывается как есть:

// установить элементу ширину в 30 пикселей document.getElementById('elem').style.width = '30px';

// Сделать фон красным document.getElementById('elem').style.backgroundColor = '#FF0000';

Вот так! Всё очень просто. Если вы знаете CSS свойства, значит, имеете возможность свободно ими рулить и в JavaScript. А попрактиковаться можете уже сейчас.

Ниже дан небольшой пример изменения свойств элемента с помощью JS. Если видете в названии слово color, это подразумевает задание цвета.

Думаю, нет нужды объяснять, что присвоение неверных значений игронируется?

• Попробуйте управлять этим списком.
• Сделать это совсем просто.
• Можете выбрать свойство color.
• Установите для него значение #0000dd

Выберите CSS-свойство и укажите корректное значение для него:

Источник