HTML DOM StyleОбъект
Объект Style
Объект Style представляет отдельное объявление стиля.
Доступ к объекту Style
Доступ к объекту Style можно получить из области head документа или из указанного HTML-элемента.
Доступ к объекту Style из области head документа:
var x = document.getElementsByTagName("STYLE");
Попробуйте сами
Доступ к объекту Style указанного элемента:
var x = document.getElementById("myH1").style;
Попробуйте сами
Создание объекта Style
Вы можете использовать метод document.createElement() для создания элемента <style>:
var x = document.createElement("STYLE");
Попробуйте сами
Вы также можете задать свойство style существующего элемента:
document.getElementById("myH1").style.color = "red";
Попробуйте сами
Свойства объекта 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 | Naqqittijuq imaluunniit utiqtiqtuq tunngavik ajji nassarnaq imaluunniit paagimut qilugaqtuq. | 1 |
| backgroundColor | Naqqittijuq imaluunniit utiqtiqtuq elementi tunngavik qalipaaq. | 1 |
| backgroundImage | Naqqittijuq imaluunniit utiqtiqtuq elementi tunngavik ajji. | 1 |
| backgroundPosition | Naqqittijuq imaluunniit utiqtiqtuq tunngavik ajji sivulliqpaa inissi. | 1 |
| backgroundRepeat | Naqqittijuq imaluunniit utiqtiqtuq qanuq tunngavik ajji tailivalliaqtuq. | 1 |
| backgroundClip | Naqqittijuq imaluunniit utiqtiqtuq tunngavik milugiarniq area. | 3 |
| backgroundOrigin | Naqqittijuq imaluunniit utiqtiqtuq tunngavik ajjiup inissiikkut area. | 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 | Сокращённое свойство для установки или возврата четырёх свойств border*Radius. | 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 |
| Направление | Задает или возвращает направление текста. | 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 | Задает или возвращает, является ли стиль шрифта normal, italic или oblique. | 1 |
| fontVariant | Задает или возвращает, отображается ли шрифт малыми прописными буквами. | 1 |
| fontWeight | Задает или возвращает насыщенность шрифта. | 1 |
| fontSizeAdjust | Обеспечивает читаемость текста при использовании резервных шрифтов. | 3 |
| fontStretch | Выбирает нормальный, сжатый или расширенный шрифт из библиотеки шрифтов. | 3 |
| hangingPunctuation | Указывает, может ли знак пунктуации располагаться за пределами строчного бокса. | 3 |
| height | Задает или возвращает высоту элемента. | 1 |
| hyphens | Задает способ разделения слов для улучшения компоновки абзаца. | 3 |
| icon | Предоставляет авторам возможность определять стили для элемента, имеющего соответствующий значок. | 3 |
| imageOrientation | Задает поворот изображения по часовой стрелке, применяемый пользовательским агентом. | 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 |
| 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 | Задает или возвращает перспективу, с которой просматривается 3D-элемент. | 3 |
| perspectiveOrigin | Задает или возвращает нижнюю позицию 3D-элемента. | 3 |
| position | Задает или возвращает тип метода позиционирования, используемого для элемента (static, relative, absolute или fixed). | 2 |
| quotes | Задает или возвращает тип кавычек, используемых для встроенных цитат. | 2 |
| resize | Задает или возвращает, может ли пользователь изменять размер элемента. | 3 |
| right | Задает или возвращает правую позицию позиционированного элемента. | 2 |
| tableLayout | Задает или возвращает метод компоновки ячеек, строк и столбцов таблицы. | 2 |
| tabSize | Задает или возвращает длину символа табуляции (tab). | 3 |
| textAlign | Задаёт или возвращает горизонтальное выравнивание текста. | 1 |
| textAlignLast | Задаёт или возвращает, как выравнивается последняя строка перед принудительным переносом строки, когда для свойства text-align установлено значение "justify". | 3 |
| textDecoration | Задаёт или возвращает оформление текста. | 1 |
| textDecorationColor | Задаёт или возвращает цвет оформления текста. | 3 |
| textDecorationLine | Задаёт или возвращает тип линии, используемой для оформления текста. | 3 |
| textDecorationStyle | Задаёт или возвращает стиль линии в оформлении текста. | 3 |
| textIndent | Задаёт или возвращает отступ первой строки текста. | 1 |
| textJustify | Установить или вернуть метод выравнивания, используемый, когда для свойства text-align задано значение "justify". | 3 |
| textOverflow | Установить или вернуть, что должно происходить, когда текст переполняет содержащий его элемент. | 3 |
| textShadow | Установить или вернуть эффект тени текста. | 3 |
| textTransform | Установить или вернуть регистр текста. | 1 |
| top | Установить или вернуть верхнюю позицию позиционированного элемента. | 2 |
| transform | Применить 2D- или 3D-преобразование к элементу. | 3 |
| transformOrigin | Установить или вернуть позицию преобразованного элемента. | 3 |
| transformStyle | Устанавливает или возвращает, как вложенные элементы отображаются в 3D-пространстве. | 3 |
| transition | Сокращённое свойство для установки или возврата четырёх свойств перехода. | 3 |
| transitionProperty | Имя свойства CSS, к которому применяется эффект перехода. | 3 |
| transitionDuration | Устанавливает или возвращает время (в секундах или миллисекундах), необходимое для завершения эффекта перехода. | 3 |
| transitionTimingFunction | Устанавливает или возвращает кривую скорости эффекта перехода. | 3 |
| transitionDelay | Устанавливает или возвращает, когда начинается эффект перехода. | 3 |
| unicodeBidi | Задаёт или возвращает, перезаписывается ли текст для поддержки нескольких языков в одном документе. | 2 |
| verticalAlign | Задаёт или возвращает вертикальное выравнивание содержимого внутри элемента. | 1 |
| visibility | Задаёт или возвращает, должен ли элемент быть видимым. | 2 |
| whiteSpace | Задаёт или возвращает, как обрабатываются символы табуляции, разрывы строк и пробелы в тексте. | 1 |
| width | Задаёт или возвращает ширину элемента. | 1 |
| wordBreak | Задаёт или возвращает правила разрыва строк для языков, не относящихся к CJK. | 3 |
| wordSpacing | Задаёт или возвращает расстояние между словами в тексте. | 1 |
| wordWrap | Разрешает переносить длинные слова или URL-адреса на следующую строку. | 3 |
| widows | Задаёт или возвращает минимальное количество видимых строк, которое элемент должен иметь в верхней части страницы. | 2 |
| zIndex | Устанавливает или возвращает порядок наложения позиционированных элементов. | 2 |