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