skip to main content

Element.style

js

Кратко 🔗

HTMLElement.style получает и устанавливает инлайновые стили элемента, то есть те, что записываются через атрибут style.

С помощью него можно управлять стилем элемента. Специфичность этого свойства такая же, как у атрибута style.

Как пишется 🔗

Чтобы получить значения инлайновых стилей с помощью свойства style, мы можем записать:

const element = document.getElementById("someElement")
const inlineStyles = element.style

В этом случае в значение inlineStyles запишется объект CSSStyleDeclaration, который будет в себе содержать все инлайновые стили, которые содержит элемент element.

Чтобы задать стили для элемента, мы можем использовать несколько способов. Либо через cssText, чтобы указать несколько свойств разом. (Тем же эффектом обладает установка стиля через setAttribute().) Либо через отдельные свойства в style.[propertyName].

// Следующие две записи работают одинаково
// и устанавливают несколько стилей в одном выражении:
element.style.cssText = "color: blue; border: 1px solid black"
element.setAttribute("style", "color:red; border: 1px solid blue;")

// Следующая — устанавливает значение определенного свойства,
// оставляя другие значения стиля нетронутыми:
element.style.color = "blue"

Как понять 🔗

HTMLElement.style — это механизм для работы со стилями на элементе. С его помощью можно управлять отображением элементов в «рантайме», то есть во время выполнения скрипта.

Этот механизм позволяет «перетирать» стили, описанные в CSS-таблицах, так как специфичность стилей в атрибуте style выше (за иcключением стилей с !important).

Чтобы указать значение конкретного CSS-свойства, мы можем использовать одноимённое отображение в style:

// Если мы хотим указать color:
element.style.color = "red" // или 'rgb(255,0,0)', или '#f00'

// Если хотим указать font-family:
element.style.fontFamily = "Arial"

Обратите внимание, что имена свойств в style.[propertyName] записываются в camelCase, в отличие от CSS-свойств, которые записываются через дефис.

Таким образом font-family превращается в fontFamily, а, например, background-color — в backgroundColor.

При сомнениях в том, как правильно называется то или иное свойство, воспользуйтесь списком соответствий:

CSS-свойства в JS-нотации
CSSJavaScript
backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
clipclip
colorcolor
cursorcursor
displaydisplay
filterfilter
floatcssFloat
fontfont
font-familyfontFamily
font-sizefontSize
font-variantfontVariant
font-weightfontWeight
heightheight
leftleft
letter-spacingletterSpacing
line-heightlineHeight
list-stylelistStyle
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-style-typelistStyleType
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
overflowoverflow
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
page-break-afterpageBreakAfter
page-break-beforepageBreakBefore
positionposition
stroke-dasharraystrokeDasharray
stroke-dashoffsetstrokeDashoffset
stroke-widthstrokeWidth
text-aligntextAlign
text-decorationtextDecoration
text-indenttextIndent
text-transformtextTransform
toptop
vertical-alignverticalAlign
visibilityvisibility
widthwidth

В работе 🔗

В целом для управления стилями лучше использовать CSS. Можно использовать классы-модификаторы, чтобы придавать какие-то наборы стилей элементу.

Инлайновые стили имеют более высокую специфичность — их труднее переопределить, и это мешает нормальной работе со стилями элемента.

Пример. Мы пишем библиотеку, которая умеет красиво рисовать кнопки. Если мы установим цвет и размер кнопки с помощью инлайновых стилей, то пользователь библиотеки не сможет их легко поменять. Использовать такую библиотеку никто не захочет

Однако, есть некоторые случаи, когда манипуляция инлайн-стилями — это ок. Например, если мы хотим управлять отображением элемента точечно, и описывать это в CSS невозможно.

Представьте, что вы хотите сделать анимацию движения точки на экране так, чтобы движение было случайным. В CSS (пока что) этого сделать нельзя, только скриптами. И вот здесь изменение инлайновых стилей как раз кстати.

Для изменения таких стилей используется HTMLElement.style.

Используйте HTMLElement.style, чтобы изменить или получить инлайновые стили элемента.

🛠 Чтобы переписать стиль элемента полностью, можно использовать cssText или setAttribute.

element.style.cssText = "color: blue; border: 1px solid black"
element.setAttribute("style", "color:red; border: 1px solid blue;")

🛠 Чтобы обновить значение конкретного свойства, а остальные оставить нетронутыми, используйте style.[propertyName]:

element.style.color = "red"
element.style.fontFamily = "Arial"

🛠 Чтобы сбросить значение, присвойте ему null.

// Если у элемента прописано style="background-color: red; color: black;",
// то такая запись:
element.style.backgroundColor = null

// ...оставит только style="color: black;".

🛠 Численным свойствам, таким как margin, padding, border-width и другим, следует указывать не только значение, но и единицу измерения:

element.style.marginTop = "50px"

Автор: Саша,