Style

Объект Style представляет собой HTML элемент <style>.

Объект Style хранит информацию об оформлении элементов.

С помощью свойств данного объекта можно изменять оформление HTML элементов из скриптов.

Синтаксис

htmlObj.style.JS_CSS_свойство [ = "значение" ]

Свойства объекта Style в таблице разбиты по подгруппам объединяющим родственные свойства:


JS-свойство
объекта Style		 CSS свойство Описание

Анимация

animation animation Универсальное свойство которое задаёт сразу несколько параметров анимации.
animationDelay animation-delay Устанавливает время ожидания перед запуском цикла анимации.
animationDirection animation-direction Устанавливает направление движения анимации.
animationDuration animation-duration Задаёт время в секундах или миллисекундах, сколько должен длиться один цикл анимации.
animationFillMode animation-fill-mode Определяет, какие стили должны применяться к элементу, когда анимация не проигрывается.
animationIterationCount animation-iteration-count Свойство определяет, сколько раз проигрывать цикл анимации до её остановки.
animationName animation-name Устанавливает одну или несколько анимаций, которые применяются к элементу.
animationPlayState animation-play-state Свойство определяет, проигрывать анимацию или поставить её на паузу.
animationTimingFunction animation-timing-function Устанавливает, согласно какой функции времени должна происходить анимация каждого цикла между ключевыми кадрами.
transition transition Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay.
transitionDelay transition-delay Устанавливает время ожидания перед запуском эффекта перехода.
transitionDuration transition-duration Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения.
transitionProperty transition-property Устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.
transitionTimingFunction transition-timing-function Устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода.

Границы

backgroundClip background-clip Определяет, как цвет фона или фоновая картинка должна выводиться под границами.
border border Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
borderBottom border-bottom Свойство позволяет одновременно установить толщину, стиль и цвет границы внизу элемента.
borderBottomColor border-bottom-color Устанавливает цвет границы внизу элемента.
borderBottomLeftRadius border-bottom-left-radius Устанавливает радиус скругления левого нижнего уголка рамки.
borderBottomRightRadius border-bottom-right-radius Устанавливает радиус скругления правого нижнего уголка рамки.
borderBottomStyle border-bottom-style Устанавливает стиль границы внизу элемента.
borderBottomWidth border-bottom-width Устанавливает толщину границы внизу элемента.
borderColor border-color Устанавливает цвет границы на разных сторонах элемента.
borderImage border-image Используется для отображения рисованной рамки вокруг элемента.
borderLeft border-left позволяет одновременно установить толщину, стиль и цвет левой границы элемента.
borderLeftColor border-left-color Задаёт цвет границы слева от элемента.
borderLeftStyle border-left-style Устанавливает стиль границы слева от элемента.
borderLeftWidth border-left-width Устанавливает толщину границы слева от элемента.
borderRadius border-radius Устанавливает радиус скругления уголков рамки.
borderRight border-right позволяет одновременно установить толщину, стиль и цвет правой границы элемента.
borderRightColor border-right-color Задаёт цвет границы справа от элемента.
borderRightStyle border-right-style Устанавливает стиль границы справа от элемента.
borderRightWidth border-right-width Устанавливает толщину границы справа от элемента.
borderStyle border-style Устанавливает стиль границы вокруг элемента.
borderTop border-top позволяет одновременно установить толщину, стиль и цвет границы сверху элемента.
borderTopColor border-top-color Задаёт цвет границы сверху элемента.
borderTopLeftRadius border-top-left-radius Устанавливает радиус скругления левого верхнего уголка рамки.
borderTopRightRadius border-top-right-radius Устанавливает радиус скругления правого верхнего уголка рамки.
borderTopStyle border-top-style Устанавливает стиль границы сверху элемента.
borderTopWidth border-top-width Устанавливает толщину границы сверху элемента.
borderWidth border-width Задаёт толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны.
boxShadow box-shadow Добавляет тень к элементу.
outline outline Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырёх сторонах элемента.
outlineColor outline-color Указывает цвет внешней границы элемента.
outlineOffset outline-offset Устанавливает расстояние между рамкой, созданной с помощью свойства outline, и краем или границей элемента добавленной через border.
outlineStyle outline-style Устанавливает стиль внешней границы элемента.
outlineWidth outline-width Определяет толщину внешней границы элемента.

Колонки

columnCount column-count Определяет количество колонок в многоколоночном тексте.
columnFill column-fill Определяет, как контент должен распределяться внутри колонок.
columnGap column-gap Задаёт расстояние между колонками в многоколоночном тексте.
columnRule column-rule В многоколоночном тексте отрисовывает линию между колонок и определяет её параметры.
columnRuleColor column-rule-color В многоколоночном тексте задаёт цвет линий между колонок.
columnRuleStyle column-rule-style Определяет стиль линий между колонок в многоколоночном тексте.
columnRuleWidth column-rule-width В многоколоночном тексте задаёт толщину линий между колонок.
columns columns Универсальное свойство, которое позволяет одновременно задать ширину и количество колонок многоколоночного текста.
columnSpan column-span Определяет, как должен отображаться элемент в многоколоночном тексте — занимать ширину всех колонок или только одну из них.
columnWidth column-width Задаёт оптимальную ширину колонки в многоколоночном тексте.

Контент

content content Позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует.
counterIncrement counter-increment Стилевое свойство counter-increment предназначено для увеличения значения счётчика приращений, который задается свойством counter-reset.
counterReset counter-reset Устанавливает переменную, в которой будет храниться счётчик отображений определенного элемента, а также начальное значение счётчика.
quotes quotes Устанавливает тип кавычек, который применяется в тексте документа.

Отступы и поля

margin margin Устанавливает величину отступа от каждого края элемента.
marginBottom margin-bottom Устанавливает величину отступа от нижнего края элемента.
marginLeft margin-left Устанавливает величину отступа от левого края элемента.
marginRight margin-right Устанавливает величину отступа от правого края элемента.
marginTop margin-top Устанавливает величину отступа от верхнего края элемента.
padding padding Устанавливает значение полей вокруг содержимого элемента.
paddingBottom padding-bottom Устанавливает значение поля от нижнего края содержимого элемента.
paddingLeft padding-left Устанавливает значение поля от левого края содержимого элемента.
paddingRight padding-right Устанавливает значение поля от правого края содержимого элемента.
paddingTop padding-top Устанавливает значение поля от верхнего края содержимого элемента.

Печать

marks marks Отображает специальные метки на странице при печати документа, предназначенные для дальнейшего обрезания страницы или для ровного соединения нескольких листов между собой.
orphans orphans Задает минимальное число строк текста, которое остается на предыдущей странице при печати документа.
pageBreakAfter page-break-after Добавляет разрыв страницы при печати документа после заданного элемента.
pageBreakBefore page-break-before Добавляет разрыв страницы при печати документа перед заданным элементом.
pageBreakInside page-break-inside Разрешает или запрещает разрыв страницы внутри элемента при печати.
widows widows Задаёт минимальное число строк текста, которое располагается на следующей странице при печати документа.

Позиционирование

bottom bottom Устанавливает положение нижнего края содержимого элемента без учёта толщины рамок и отступов.
left left Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента.
position position Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
right right Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента.
top top Для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента.
zIndex z-index Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану.

Размеры

boxSizing box-sizing Применяется для изменения алгоритма расчёта ширины и высоты элемента.
height height Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится <img>).
maxHeight max-height Устанавливает максимальную высоту элемента.
maxWidth max-width Устанавливает максимальную ширину элемента.
minHeight min-height Задаёт минимальную высоту элемента.
minWidth min-width Устанавливает минимальную ширину элемента.
resize resize Указывает, можно ли пользователю изменять размеры текстового поля.
width width Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится <img>).

Списки

listStyle list-style Универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера списка.
listStyleImage list-style-image Устанавливает адрес изображения, которое служит в качестве маркера списка.
listStylePosition list-style-position Определяет, как будет размещаться маркер относительно текста.
listStyleType list-style-type Изменяет вид маркера для каждого элемента списка.

Таблицы

borderCollapse border-collapse Устанавливает, как отображать границы вокруг ячеек таблицы.
borderSpacing border-spacing Задаёт расстояние между границами ячеек в таблице.
captionSide caption-side Определяет положение заголовка таблицы, который задается с помощью элемента <caption>, относительно самой таблицы.
emptyCells empty-cells Задаёт отображение границ и фона в ячейке, если она пустая.
tableLayout table-layout Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на её содержимом.

Текст и шрифт

direction direction direction предназначен для сайтов, в которых имеет значение направление текста.
font font Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.
fontFamily font-family Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого.
fontKerning font-kerning Управляет кернингом шрифта.
fontSize font-size Определяет размер шрифта элемента.
fontStretch font-stretch Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.
fontStyle font-style Определяет начертание шрифта — обычное, курсивное или наклонное.
fontVariant font-variant Определяет, как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера.
fontWeight font-weight Устанавливает насыщенность шрифта.
hyphens hyphens сообщает браузеру, как расставлять переносы слов в блоке текста.
letterSpacing letter-spacing Определяет интервал между символами в пределах элемента.
lineHeight line-height Для блочных элементов определяет минимальную высоту строки текста.
tabSize tab-size Используется для изменения ширины отступа, заданного с помощью символа табуляции (клавиша Tab).
textAlign text-align Определяет горизонтальное выравнивание текста в пределах элемента.
textAlignLast text-align-last Задаёт выравнивание последней строки текста, когда свойство text-align установлено как justify.
textDecoration text-decoration Добавляет оформление текста в виде его подчёркивания, перечёркивания или линии над текстом.
textDecorationColor text-decoration-color Устанавливает цвет линии, которая добавляется через свойство text-decoration.
textDecorationLine text-decoration-line Определяет, как должна добавляться декоративная линия к тексту — подчёркивание, перечёркивание, над текстом.
textDecorationStyle text-decoration-style Устанавливает стиль декоративной линии, которая добавляется к тексту через свойство text-decoration или text-decoration-line.
textIndent text-indent Устанавливает величину отступа первой строки блока текста (например, для абзаца <p>).
textOverflow text-overflow Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область.
textShadow text-shadow Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия.
textTransform text-transform Управляет преобразованием текста элемента в заглавные или прописные символы.
unicodeBidi unicode-bidi В европейских языках чтение текста происходит слева направо, в то время как есть языки, где текст читается справа налево.
whiteSpace white-space Устанавливает, как отображать пробелы между словами.
wordBreak word-break Указывает, как делать перенос строк внутри слов, которые не помещаются по ширине в заданную область.
wordSpacing word-spacing Устанавливает интервал между словами.
wordWrap word-wrap Указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область.
writingMode writing-mode Устанавливает направление текста на странице — по горизонтали или вертикали.

Тени и прозрачность

boxShadow box-shadow Добавляет тень к элементу.
opacity opacity Определяет уровень прозрачности элемента веб-страницы.
textShadow text-shadow Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия.

Трансформация

backfaceVisibility backface-visibility Определяет, показывать обратную сторону элемента или нет.
perspective perspective Определяет расстояние от плоскости экрана до точки сходимости линий и тем самым задаёт, насколько выражен эффект перспективы.
perspectiveOrigin perspective-origin Задаёт координаты точки, куда смотрит наблюдатель.
transform transform Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.
transformOrigin transform-origin Устанавливает координаты точки, относительно которой будет происходить трансформация элемента.
transformStyle transform-style Определяет, как дочерние элементы будут отображаться в 3D-пространстве.
zoom zoom Изменяет масштаб объекта согласно заданному значению.

Флексы

alignContent align-content Задаёт тип выравнивания строк внутри флекс-контейнера по поперечной оси при наличии свободного пространства.
alignItems align-items Выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.
alignSelf align-self Выравнивает флекс-элементы текущей строки, переписывая значение align-items.
flex flex Сокращённое свойство, которое позволяет указать параметры элемента, чтобы он эффективно заполнял доступное пространство.
flexBasis flex-basis Определяет основу флекса, которая является начальным размером элемента.
flexDirection flex-direction Задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере.
flexFlow flex-flow Является сокращённым свойством для отдельных свойств flex-direction и flex-wrap.
flexGrow flex-grow Определяет, сколько пространства может занимать флекс внутри контейнера.
flexShrink flex-shrink Устанавливает коэффициент сжатия флексов в контейнере и задаёт, насколько элемент будет уменьшаться по отношению к другим флексам, чтобы разместить все элементы в одну строку.
flexWrap flex-wrap Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк.
justifyContent justify-content Определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера.
order order Определяет порядок вывода флексов внутри флекс-контейнера.

Форматирование

all all Универсальное свойство, которое сбрасывает все значения свойств в исходные или наследуемые, за исключением свойств direction и unicode-bidi.
clear clear Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.
clip clip Определяет область позиционированного элемента, в которой будет показано его содержимое.
cssFloat float Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.
display display Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
overflow overflow Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
overflowX overflow-x Управляет отображением содержания блочного элемента по горизонтали, если контент целиком не помещается и выходит за область справа или слева от блока.
overflowY overflow-y Управляет отображением содержания блочного элемента по вертикали, если контент целиком не помещается и выходит за область сверху или снизу от блока.
verticalAlign vertical-align Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.
visibility visibility Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон.

Цвет и фон

background background Универсальное свойство background позволяет установить одновременно до пяти характеристик фона.
backgroundAttachment background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.
backgroundClip background-clip Определяет, как цвет фона или фоновая картинка должна выводиться под границами.
backgroundColor background-color Определяет цвет фона элемента.
backgroundImage background-image Устанавливает фоновое изображение для элемента.
backgroundOrigin background-origin Определяет область позиционирования фонового рисунка.
backgroundPosition background-position Задаёт начальное положение фонового изображения, установленного с помощью свойства background-image.
backgroundRepeat background-repeat Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image.
backgroundSize background-size Масштабирует фоновое изображение согласно заданным размерам.
color color Определяет цвет текста элемента.
filter filter Предназначено для применения художественных эффектов к элементам.

Разное

cursor cursor Устанавливает форму курсора, когда он находится в пределах элемента.
imageRendering image-rendering Сообщает браузеру, каким алгоритмом интерполировать изображение при масштабировании его размеров или изменении масштаба в параметрах браузера.
objectFit object-fit Управляет соотношением сторон заменяемых элементов, таких как <img> и <video>, когда у них задана ширина или высота, а также способом масштабирования.
orient -moz-orient Устанавливает горизонтальное или вертикальное положение индикатора элемента <progress> или <meter>.
pointerEvents pointer-events Позволяет управлять тем, как элементы будут реагировать на события мыши или прикосновения к сенсорному экрану.
userSelect user-select Управляет поведением выделения текста и других элементов на странице, в частности, позволяет запретить выделение текста.

Справочник JavaScript