Объект Style HTML DOM

Объект Style

Объект Style представляет отдельное заявление о стиле.

Свойства объекта Style

Свойство Описание
alignContent Установить или вернуть способ выравнивания строк в контейнере с эластичностью, когда элементы не используют все доступное пространство.
alignItems Установить или вернуть способ выравнивания элементов в контейнере с эластичностью.
alignSelf Установить или вернуть способ выравнивания选定ных элементов в контейнере с эластичностью.
animation Краткая форма всех свойств анимации, за исключением animationPlayState.
animationDelay Установить или вернуть время начала анимации.
animationDirection Установить или вернуть, следует ли анимации играть в обратном направлении в альтернативном цикле.
animationDuration Установить или вернуть количество секунд или миллисекунд, необходимых для выполнения одного цикла анимации.
animationFillMode Установить или вернуть значение, применяемое за пределами времени выполнения анимации.
animationIterationCount Установить или вернуть количество раз, которое должна быть выполнена анимация.
animationName Установить или вернуть имя анимации @keyframes.
animationPlayState Установить или вернуть, выполняется ли анимация или она приостановлена.
animationTimingFunction Установить или вернуть кривую скорости анимации.
background Установить или вернуть все свойства фона в одном заявлении.
backgroundAttachment Установить или вернуть, является ли изображение фона фиксированным или скроллируемым.
backgroundClip Установить или вернуть область рисования фона.
backgroundColor Установить или вернуть цвет фона элемента.
backgroundImage Установить или вернуть изображение фона элемента.
backgroundOrigin Установить или вернуть область定位 фонового изображения.
backgroundPosition Установить или вернуть начальное положение фонового изображения.
backgroundRepeat Установить или вернуть, как фоновое изображение должно повторяться (плитка).
backgroundSize Установить или вернуть размер фонового изображения.
backfaceVisibility Установить или вернуть, виден ли элемент, когда он не面向 экран.
border Установить или вернуть, должны ли рамка, стиль рамки и цвет рамки устанавливаться в одном заявлении.
borderBottom Установить или вернуть все свойства borderBottom в одном заявлении.
borderBottomColor Установить или вернуть цвет нижней рамки.
borderBottomLeftRadius Установить или вернуть форму нижнего левого угла рамки.
borderBottomRightRadius Установить или вернуть форму нижнего правого угла рамки.
borderBottomStyle Установить или вернуть стиль нижней рамки.
borderBottomWidth Установить или вернуть ширину нижней рамки.
borderCollapse Установить или вернуть, должны ли рамки таблицы сжиматься в одну рамку.
borderColor Установить или вернуть цвет рамки элемента (можно установить до четырех значений).
borderImage Краткое свойство для установки или возвращения всех свойств borderImage.
borderImageOutset Установить или вернуть количество, на которое рамка изображения выходит за пределы рамки box.
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 добавить один или несколько тени к рамке (box).
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 Установить или вернуть тип отображения элемента.
emptyCells Установить или вернуть отображение рамки и фона пустых ячеек.
filter Установить или вернуть фильтр изображения (визуальные эффекты, такие как размытие и насыщенность).
flex Установить или вернуть длину элемента по отношению к другим частям.
flexBasis Установить или вернуть начальную длину эластичного элемента.
flexDirection Установить или вернуть направление эластичного элемента.
flexFlow Краткая форма свойств flexDirection и flexWrap.
flexGrow Установить или вернуть количество роста элемента по отношению к другим элементам.
flexShrink Установить или вернуть способ сжатия элемента по отношению к другим элементам.
flexWrap Установить или вернуть возможность переноса эластичного элемента.
cssFloat Установить или вернуть горизонтальное выравнивание элемента.
font Установить или вернуть атрибуты шрифта в одном заявлении.
fontFamily Установить или вернуть семейство шрифтов текста.
fontSize Установить или вернуть размер шрифта текста.
fontStyle Установить или вернуть стиль шрифта как normal, italic или oblique.
fontVariant Установить или вернуть отображение шрифта в виде малых заглавных букв.
fontWeight Установить или вернуть толщину шрифта.
fontSizeAdjust Удерживать читаемость текста при возникновении отступа шрифта.
fontStretch Выбрать способ эластичности из шрифтового семейства.
hangingPunctuation Определить, можно ли放置 знаки препинания вне строки.
height Установить или вернуть высоту элемента.
hyphens Установить способ разбиения слов для улучшения макета абзаца.
icon Позволить автору использовать значимые эквиваленты для установки стиля элемента.
imageOrientation Определить поворот изображения в правом или часовом направлении для пользователя агента.
isolation Определить, должен ли элемент создавать новый слой содержимого.
justifyContent Установить или вернуть способ выравнивания элементов в контейнере эластичности, когда не используется все доступное пространство.
left Установить или вернуть левое положение элемента позиционирования.
letterSpacing Устанавливает или возвращает пространство между символами в тексте.
lineHeight Устанавливает или возвращает расстояние между строками в тексте.
listStyle Устанавливает или возвращает список стилей в одном заявлении.
listStyleImage Устанавливает или возвращает изображение в качестве маркера списка.
listStylePosition Устанавливает или возвращает положение маркера списка.
listStyleType Устанавливает или возвращает тип маркера списка.
margin Устанавливает или возвращает внешние поля элемента (можно установить до четырех значений).
marginBottom Устанавливает или возвращает нижние внешние поля элемента.
marginLeft Устанавливает или возвращает левые внешние поля элемента.
marginRight Устанавливает или возвращает правые внешние поля элемента.
marginTop Устанавливает или возвращает верхний внешние поля элемента.
maxHeight Устанавливает или возвращает максимальную высоту элемента.
maxWidth Устанавливает или возвращает максимальную ширину элемента.
minHeight Устанавливает или возвращает минимальную высоту элемента.
minWidth Устанавливает или возвращает минимальную ширину элемента.
navDown Устанавливает или возвращает позицию навигации при использовании клавиши навигации с нижним стрелочным указателем.
navIndex Устанавливает или возвращает порядок прыжка элемента.
navLeft Устанавливает или возвращает позицию навигации при использовании клавиши навигации с левым стрелочным указателем.
navRight Устанавливает или возвращает позицию навигации при использовании клавиши навигации с правым стрелочным указателем.
navUp Устанавливает или возвращает позицию навигации при использовании клавиши навигации с верхним стрелочным указателем.
objectFit Определяет, как содержимое заменяемого элемента должно подходить к рамке, определенной его использованием высоты и ширины.
objectPosition Определяет способ выравнивания заменяемого элемента в рамке.
opacity Устанавливает или возвращает уровень непрозрачности элемента.
order Устанавливает или возвращает порядок эластичного элемента относительно других элементов.
orphans Устанавливает или возвращает минимальное количество строк, которые должны оставаться на странице снизу, когда внутри элемента происходит разбиение на страницы.
outline Устанавливает или возвращает все свойства 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 Установить или вернуть способ-layout таблицы ячеек, строк и столбцов.
tabSize Установить или вернуть длину табулятора.
textAlign Установить или вернуть способ горизонтального выравнивания текста.
textAlignLast Установить или вернуть то, как блок выравнивается в последней строке или перед принудительным переносом строки при установке text-align в "justify".
textDecoration Установить или вернуть текстовое декорирование.
textDecorationColor Установить или вернуть цвет текстового декорирования.
textDecorationLine Установить или вернуть тип строки в текстовом декорировании.
textDecorationStyle Установить или вернуть стиль线条 в текстовом декорировании.
textIndent Установить или вернуть отступ первого строки текста.
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 Установка или возврат правил переноса для языков, не являющихся CJK.
wordSpacing Установка или возврат интервала между словами в тексте.
wordWrap Разрешает разбивку длинных, непрерывных слов и перенос их на следующую строку.
widows Установка или возврат минимального количества строк, чтобы элемент был виден на вершине страницы.
zIndex Установка или возврат стека порядка расположения элементов.

Доступ к стилистическому объекту

Стилистический объект можно получить из части head документа или из конкретного HTML элемента.

Пример 1

Доступ к стилистическому объекту из части head документа:

var x = document.getElementsByTagName("STYLE");

Попробуйте сами

Пример 2

Доступ к стилистическому объекту指定的 элемента:

var x = document.getElementById("myH1").style;

Попробуйте сами

Создание объекта Style

Пример 1

Вы можете использовать метод document.createElement() для создания элемента <style>:

var x = document.createElement("STYLE");

Попробуйте сами

Пример 2

Вы также можете установить стили свойств существующих элементов:

document.getElementById("myH1").style.color = "red";

Попробуйте сами

Связанные страницы

Уроки HTML:HTML CSS

Уроки CSS:Уроки CSS

Руководство по HTML:Тег <style> в HTML

Руководство по CSS:Свойства CSS