JavaScript HTML DOM объект стилей
Объект стилей
Объект Style представляет собой индивидуальное утверждение стиля.
Свойства объекта стиля
Столбец "CSS" указывает, в какой версии CSS определено свойство (CSS1, CSS2 или CSS3).
| Свойство | Описание | CSS |
|---|---|---|
| alignContent | Устанавливает или возвращает выравнивание между линиями внутри гибкого контейнера, когда элементы не используют все доступное пространство | 3 |
| alignItems | Устанавливает или возвращает выравнивание для элементов внутри гибкого контейнера | 3 |
| alignSelf | Устанавливает или возвращает выравнивание для выбранных элементов внутри гибкого контейнера | 3 |
| animation | Сокращенное свойство для всех свойств анимации ниже, кроме свойства animationPlayState. | 3 |
| animationDelay | Устанавливает или возвращается, когда начнется анимация | 3 |
| animationDirection | Устанавливает или возвращает, должна ли анимация воспроизводиться в обратном порядке в альтернативных циклах | 3 |
| animationDuration | Устанавливает или возвращает, сколько секунд или миллисекунд требуется анимации для завершения одного цикла | 3 |
| animationFillMode | Устанавливает или возвращает значения, применяемые анимацией вне времени ее выполнения | 3 |
| animationIterationCount | Устанавливает или возвращает количество раз, которое следует воспроизвести анимацию | 3 |
| animationName | Устанавливает или возвращает имя для анимации @keyframes | 3 |
| animationTimingFunction | Устанавливает или возвращает кривую скорости анимации | 3 |
| animationPlayState | Устанавливает или возвращает, запущена или приостановлена анимация | 3 |
| background | Устанавливает или возвращает все свойства фона в одном объявлении | 1 |
| backgroundAttachment | Устанавливает или возвращает, является ли фоновое изображение фиксированным или прокручивается вместе со страницей | 1 |
| backgroundColor | Устанавливает или возвращает цвет фона элемента | 1 |
| backgroundImage | Устанавливает или возвращает фоновое изображение для элемента | 1 |
| backgroundPosition | Устанавливает или возвращает начальную позицию фонового изображения | 1 |
| backgroundRepeat | Устанавливает или возвращает способ повторения (плитки) фонового изображения | 1 |
| backgroundClip | Устанавливает или возвращает область рисования фона | 3 |
| backgroundOrigin | Устанавливает или возвращает область позиционирования фоновых изображений | 3 |
| backgroundSize | Устанавливает или возвращает размер фонового изображения | 3 |
| backfaceVisibility | Устанавливает или возвращает, должен ли элемент быть видимым, когда он не обращен к экрану | 3 |
| border | Устанавливает или возвращает borderWidth, borderStyle и borderColor в одном объявлении | 1 |
| borderBottom | Устанавливает или возвращает все свойства borderBottom в одном объявлении | 1 |
| borderBottomColor | Устанавливает или возвращает цвет нижней границы | 1 |
| borderBottomLeftRadius | Устанавливает или возвращает форму границы нижнего левого угла | 3 |
| borderBottomRightRadius | Устанавливает или возвращает форму границы нижнего правого угла | 3 |
| borderBottomStyle | Устанавливает или возвращает стиль нижней границы | 1 |
| borderBottomWidth | Устанавливает или возвращает ширину нижней границы | 1 |
| borderCollapse | Устанавливает или возвращает, следует ли свернуть границу таблицы в одну границу или нет | 2 |
| borderColor | Устанавливает или возвращает цвет границы элемента (может иметь до четырех значений) | 1 |
| borderImage | Сокращенное свойство для установки или возврата всех свойств borderImage | 3 |
| borderImageOutset | Устанавливает или возвращает величину, на которую область изображения границы выходит за пределы рамки | 3 |
| borderImageRepeat | Устанавливает или возвращает, следует ли повторять, округлять или растягивать границу изображения | 3 |
| borderImageSlice | Устанавливает или возвращает внутреннее смещение границы изображения | 3 |
| borderImageSource | Устанавливает или возвращает изображение, которое будет использоваться в качестве границы | 3 |
| borderImageWidth | Устанавливает или возвращает ширину границы изображения | 3 |
| borderLeft | Устанавливает или возвращает все свойства borderLeft в одном объявлении | 1 |
| borderLeftColor | Устанавливает или возвращает цвет левой границы | 1 |
| borderLeftStyle | Устанавливает или возвращает стиль левой границы | 1 |
| borderLeftWidth | Устанавливает или возвращает ширину левой границы | 1 |
| borderRadius | Сокращенное свойство для установки или возврата всех четырех свойств borderRadius | 3 |
| borderRight | Устанавливает или возвращает все свойства borderRight в одном объявлении | 1 |
| borderRightColor | Устанавливает или возвращает цвет правой границы | 1 |
| borderRightStyle | Устанавливает или возвращает стиль правой границы | 1 |
| borderRightWidth | Устанавливает или возвращает ширину правой границы | 1 |
| borderSpacing | Устанавливает или возвращает расстояние между ячейками в таблице | 2 |
| borderStyle | Устанавливает или возвращает стиль границы элемента (может иметь до четырех значений) | 1 |
| borderTop | Устанавливает или возвращает все свойства borderTop в одном объявлении | 1 |
| borderTopColor | Устанавливает или возвращает цвет верхней границы | 1 |
| borderTopLeftRadius | Устанавливает или возвращает форму границы верхнего левого угла | 3 |
| borderTopRightRadius | Устанавливает или возвращает форму границы правого верхнего угла | 3 |
| borderTopStyle | Устанавливает или возвращает стиль верхней границы | 1 |
| borderTopWidth | Устанавливает или возвращает ширину верхней границы | 1 |
| borderWidth | Устанавливает или возвращает ширину границы элемента (может иметь до четырех значений) | 1 |
| bottom | Устанавливает или возвращает нижнюю позицию позиционированного элемента | 2 |
| boxDecorationBreak | Устанавливает или возвращает поведение фона и границы элемента при разрыве страницы или, для встроенных элементов, при разрыве строки | 3 |
| boxShadow | Прикрепляет одну или несколько падающих теней к блоку | 3 |
| boxSizing | Позволяет вам определять определенные элементы, подходящие для определенной области | 3 |
| captionSide | Устанавливает или возвращает позицию заголовка таблицы | 2 |
| clear | Устанавливает или возвращает позицию элемента относительно плавающих объектов | 1 |
| clip | Устанавливает или возвращает, какая часть позиционированного элемента видна | 2 |
| color | Устанавливает или возвращает цвет текста | 1 |
| columnCount | Устанавливает или возвращает количество столбцов, на которые должен быть разделен элемент | 3 |
| columnFill | Устанавливает или возвращает способ заполнения столбцов | 3 |
| columnGap | Устанавливает или возвращает промежуток между столбцами | 3 |
| columnRule | Сокращенное свойство для установки или возврата всех свойств columnRule | 3 |
| columnRuleColor | Устанавливает или возвращает цвет правила между столбцами | 3 |
| columnRuleStyle | Устанавливает или возвращает стиль правила между столбцами | 3 |
| columnRuleWidth | Устанавливает или возвращает ширину правила между столбцами | 3 |
| columns | Сокращенное свойство для установки или возврата columnWidth и columnCount | 3 |
| columnSpan | Устанавливает или возвращает, сколько столбцов должен занимать элемент | 3 |
| columnWidth | Устанавливает или возвращает ширину столбцов | 3 |
| content | Используется с псевдоэлементами :before и :after для вставки сгенерированного содержимого | 2 |
| counterIncrement | Увеличивает один или несколько счетчиков | 2 |
| counterReset | Создает или сбрасывает один или несколько счетчиков | 2 |
| cursor | Устанавливает или возвращает тип курсора, отображаемого для указателя мыши | 2 |
| direction | Устанавливает или возвращает направление текста | 2 |
| display | Устанавливает или возвращает тип отображения элемента | 1 |
| emptyCells | Устанавливает или возвращает, показывать ли границу и фон пустых ячеек или нет | 2 |
| filter | Устанавливает или возвращает фильтры изображения (визуальные эффекты, такие как размытие и насыщенность) | 3 |
| flex | Устанавливает или возвращает длину элемента относительно остальных | 3 |
| flexBasis | Устанавливает или возвращает начальную длину гибкого элемента | 3 |
| flexDirection | Устанавливает или возвращает направление гибких элементов | 3 |
| flexFlow | Сокращенное свойство для свойств flexDirection и flexWrap | 3 |
| flexGrow | Устанавливает или возвращает, насколько элемент будет расти относительно остальных | 3 |
| flexShrink | Устанавливает или возвращает, как элемент будет сжиматься относительно остальных | 3 |
| flexWrap | Устанавливает или возвращает, должны ли гибкие элементы оборачиваться или нет | 3 |
| cssFloat | Устанавливает или возвращает горизонтальное выравнивание элемента | 1 |
| font | Устанавливает или возвращает fontStyle, fontVariant, fontWeight, fontSize, lineHeight и fontFamily в одном объявлении | 1 |
| fontFamily | Устанавливает или возвращает семейство шрифтов для текста | 1 |
| fontSize | Устанавливает или возвращает размер шрифта текста | 1 |
| fontStyle | Устанавливает или возвращает стиль шрифта: нормальный, курсив или наклонный | 1 |
| fontVariant | Устанавливает или возвращает, должен ли шрифт отображаться маленькими заглавными буквами | 1 |
| fontWeight | Устанавливает или возвращает жирность шрифта | 1 |
| fontSizeAdjust | Сохраняет удобочитаемость текста при замене шрифта | 3 |
| fontStretch | Выбирает обычное, сжатое или расширенное начертание из семейства шрифтов | 3 |
| hangingPunctuation | Определяет, можно ли помещать знак препинания за пределы строки | 3 |
| height | Устанавливает или возвращает высоту элемента | 1 |
| hyphens | Устанавливает, как разделять слова для улучшения компоновки абзацев | 3 |
| icon | Предоставляет автору возможность стилизовать элемент с помощью иконического эквивалента | 3 |
| imageOrientation | Определяет поворот вправо или по часовой стрелке, который пользовательский агент применяет к изображению | 3 |
| isolation | Определяет, должен ли элемент создавать новое содержимое стека | 3 |
| justifyContent | Устанавливает или возвращает выравнивание между элементами внутри гибкого контейнера, когда элементы не используют все доступное пространство | 3 |
| left | Устанавливает или возвращает левую позицию позиционированного элемента | 2 |
| letterSpacing | Устанавливает или возвращает пробел между символами в тексте | 1 |
| lineHeight | Устанавливает или возвращает расстояние между строками в тексте | 1 |
| listStyle | Устанавливает или возвращает listStyleImage, listStylePosition и listStyleType в одном объявлении | 1 |
| listStyleImage | Устанавливает или возвращает изображение в качестве маркера элемента списка | 1 |
| listStylePosition | Устанавливает или возвращает позицию маркера элемента списка | 1 |
| listStyleType | Устанавливает или возвращает тип маркера элемента списка | 1 |
| margin | Устанавливает или возвращает поля элемента (может иметь до четырех значений) | 1 |
| marginBottom | Устанавливает или возвращает нижнее поле элемента | 1 |
| marginLeft | Устанавливает или возвращает левое поле элемента | 1 |
| marginRight | Устанавливает или возвращает правое поле элемента | 1 |
| marginTop | Устанавливает или возвращает верхнее поле элемента | 1 |
| maxHeight | Устанавливает или возвращает максимальную высоту элемента | 2 |
| maxWidth | Устанавливает или возвращает максимальную ширину элемента | 2 |
| minHeight | Устанавливает или возвращает минимальную высоту элемента | 2 |
| minWidth | Устанавливает или возвращает минимальную ширину элемента | 2 |
| navDown | Устанавливает или возвращает место для навигации при использовании клавиши навигации со стрелкой вниз | 3 |
| navIndex | Устанавливает или возвращает порядок табуляции для элемента | 3 |
| navLeft | Устанавливает или возвращает место для навигации при использовании клавиши навигации со стрелкой влево | 3 |
| navRight | Устанавливает или возвращает место для навигации при использовании клавиши навигации со стрелкой вправо | 3 |
| navUp | Устанавливает или возвращает, куда перемещаться при использовании клавиши навигации со стрелкой вверх | 3 |
| objectFit | Определяет, как содержимое заменяемого элемента должно соответствовать блоку, установленному его используемой высотой и шириной | 3 |
| objectPosition | Определяет выравнивание заменяемого элемента внутри его поля | 3 |
| opacity | Устанавливает или возвращает уровень непрозрачности для элемента | 3 |
| order | Устанавливает или возвращает порядок гибкого элемента относительно остальных | 3 |
| orphans | Устанавливает или возвращает минимальное количество строк для элемента, которое должно оставаться внизу страницы, когда разрыв страницы происходит внутри элемента | 2 |
| outline | Устанавливает или возвращает все свойства структуры в одном объявлении | 2 |
| outlineColor | Устанавливает или возвращает цвет контура вокруг элемента | 2 |
| outlineOffset | Смещает контур и выводит его за край границы | 3 |
| outlineStyle | Устанавливает или возвращает стиль контура вокруг элемента | 2 |
| outlineWidth | Устанавливает или возвращает ширину контура вокруг элемента | 2 |
| overflow | Устанавливает или возвращает, что делать с содержимым, отображаемым за пределами поля элемента | 2 |
| overflowX | Определяет, что делать с левым/правым краями содержимого, если оно выходит за пределы области содержимого элемента | 3 |
| overflowY | Определяет, что делать с верхними/нижними краями содержимого, если они выходят за пределы области содержимого элемента | 3 |
| padding | Устанавливает или возвращает заполнение элемента (может иметь до четырех значений) | 1 |
| paddingBottom | Устанавливает или возвращает нижнее заполнение элемента | 1 |
| paddingLeft | Устанавливает или возвращает левое заполнение элемента | 1 |
| paddingRight | Устанавливает или возвращает правое заполнение элемента | 1 |
| paddingTop | Устанавливает или возвращает верхнее заполнение элемента | 1 |
| pageBreakAfter | Устанавливает или возвращает поведение разрыва страницы после элемента | 2 |
| pageBreakBefore | Устанавливает или возвращает поведение разрыва страницы перед элементом | 2 |
| pageBreakInside | Устанавливает или возвращает поведение разрыва страницы внутри элемента | 2 |
| perspective | Устанавливает или возвращает перспективу просмотра трехмерных элементов | 3 |
| perspectiveOrigin | Устанавливает или возвращает нижнюю позицию 3D-элементов | 3 |
| position | Устанавливает или возвращает тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный или фиксированный) | 2 |
| quotes | Устанавливает или возвращает тип кавычек для встроенных цитат | 2 |
| resize | Устанавливает или возвращает, может ли пользователь изменять размер элемента | 3 |
| right | Устанавливает или возвращает правильную позицию позиционированного элемента | 2 |
| tableLayout | Устанавливает или возвращает способ размещения ячеек, строк и столбцов таблицы | 2 |
| tabSize | Устанавливает или возвращает длину символа табуляции | 3 |
| textAlign | Устанавливает или возвращает горизонтальное выравнивание текста | 1 |
| textAlignLast | Устанавливает или возвращает способ выравнивания последней строки блока или строки прямо перед принудительным разрывом строки, если выравнивание текста имеет значение "justify" | 3 |
| textDecoration | Устанавливает или возвращает оформление текста | 1 |
| textDecorationColor | Устанавливает или возвращает цвет оформления текста | 3 |
| textDecorationLine | Устанавливает или возвращает тип строки в текстовом оформлении | 3 |
| textDecorationStyle | Устанавливает или возвращает стиль линии в текстовом оформлении | 3 |
| textIndent | Устанавливает или возвращает отступ первой строки текста | 1 |
| textJustify | Устанавливает или возвращает метод выравнивания, используемый, когда выравнивание текста имеет значение "justify" | 3 |
| textOverflow | Устанавливает или возвращает то, что должно произойти, когда текст выходит за пределы содержащего элемента | 3 |
| textShadow | Устанавливает или возвращает теневой эффект текста | 3 |
| textTransform | Устанавливает или возвращает заглавные буквы в тексте | 1 |
| top | Устанавливает или возвращает верхнюю позицию позиционированного элемента | 2 |
| transform | Применяет к элементу 2D или 3D преобразование | 3 |
| transformOrigin | Устанавливает или возвращает позицию преобразованных элементов | 3 |
| transformStyle | Устанавливает или возвращает способ визуализации вложенных элементов в трехмерном пространстве | 3 |
| transition | Сокращенное свойство для установки или возврата четырех свойств перехода | 3 |
| transitionProperty | Устанавливает или возвращает свойство CSS, для которого предназначен эффект перехода | 3 |
| transitionDuration | Устанавливает или возвращает, сколько секунд или миллисекунд требуется для завершения эффекта перехода | 3 |
| transitionTimingFunction | Устанавливает или возвращает кривую скорости эффекта перехода | 3 |
| transitionDelay | Устанавливает или возвращает, когда начнется эффект перехода | 3 |
| unicodeBidi | Устанавливает или возвращает, следует ли переопределить текст для поддержки нескольких языков в одном документе | 2 |
| userSelect | Устанавливает или возвращает, можно ли выделить текст элемента | 2 |
| verticalAlign | Устанавливает или возвращает вертикальное выравнивание содержимого в элементе | 1 |
| visibility | Устанавливает или возвращает, должен ли элемент быть видимым | 2 |
| whiteSpace | Задает или возвращает способ обработки табуляции, разрывов строк и пробелов в тексте | 1 |
| width | Устанавливает или возвращает ширину элемента | 1 |
| wordBreak | Устанавливает или возвращает правила разрыва строки для скриптов, не относящихся к CJK | 3 |
| wordSpacing | Устанавливает или возвращает интервал между словами в тексте | 1 |
| wordWrap | Позволяет разбивать длинные неразрывные слова и переносить их на следующую строку | 3 |
| widows | Задает или возвращает минимальное количество строк для элемента, который должен быть виден вверху страницы | 2 |
| zIndex | Устанавливает или возвращает порядок стека позиционированного элемента | 2 |
Доступ к объекту стиля
Доступ к объекту стиля можно получить из раздела заголовка документа или из определенных элементов HTML.
Доступ к объектам стиля из заголовка документа:
Доступ к объекту стиля указанного элемента:
Создайте объект стиля
Вы можете создать элемент <style> с помощью метода document.createElement():
Вы также можете установить свойства стиля существующего элемента:
Связанные страницы
HTML учебник: HTML CSS
CSS учебник: CSS Учебник
HTML справочник: HTML тег <style>
CSS справочник: CSS Свойства
