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 Свойства