HTMLElement: style property
The read-only style property of the HTMLElement returns the inline style of an element in the form of a live CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned only for the attributes that are defined in the element’s inline style attribute.
Shorthand properties are expanded. If you set style=»border-top: 1px solid black» , the longhand properties ( border-top-color , border-top-style , and border-top-width ) are set instead.
This property is read-only, meaning it is not possible to assign a CSSStyleDeclaration object to it. Nevertheless, it is possible to set an inline style by assigning a string directly to the style property. In this case the string is forwarded to CSSStyleDeclaration.cssText . Using style in this manner will completely overwrite all inline styles on the element.
Therefore, to add specific styles to an element without altering other style values, it is generally preferable to set individual properties on the CSSStyleDeclaration object. For example, you can write element.style.backgroundColor = «red» .
A style declaration is reset by setting it to null or an empty string, e.g., elt.style.color = null .
Note: CSS property names are converted to JavaScript identifier with these rules:
- If the property is made of one word, it remains as it is: height stays as is (in lowercase).
- If the property is made of several words, separated by dashes, the dashes are removed and it is converted to camelCase: background-attachment becomes backgroundAttachment .
- The property float , being a reserved JavaScript keyword, is converted to cssFloat .
The style property has the same priority in the CSS cascade as an inline style declaration set via the style attribute.
Value
Examples
Getting style information
The following code snippet demonstrates how the values obtained using the element’s style property relates to the style set on the HTML attribute:
doctype html> html lang="en-US"> body style="font-weight:bold"> div style="border-top: 1px solid blue; color:red" id="elt"> An example div div> pre id="out">pre> body> html>
const element = document.getElementById("elt"); const out = document.getElementById("out"); const elementStyle = element.style; // We loop through all styles (for…of doesn't work with CSStyleDeclaration) for (const prop in elementStyle) if (Object.hasOwn(elementStyle, prop)) out.textContent += `$ elementStyle[prop] > = '$elementStyle.getPropertyValue(elementStyle[prop])>'\n`; > >
Note font-weight is not listed as a value for elementStyle as it is not defined within the style attribute of the element itself. Rather, it is inherited from the definition on its parent. Also note that the shorthand border-top property, defined in the style attribute, is not listed directly. Rather, it is replaced by the three corresponding longhand properties ( border-top-color , border-top-style , and border-top-width ).
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Jul 7, 2023 by MDN contributors.
Your blueprint for a better internet.
.style
Свойство style получает и устанавливает инлайновые стили элемента, то есть те, что записываются через HTML-атрибут style .
С помощью него можно управлять стилем элемента. Специфичность этого свойства такая же, как у атрибута style .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Чтобы получить значения инлайновых стилей с помощью свойства style , мы можем записать:
const element = document.getElementById('someElement')const inlineStyles = element.styleconst element = document.getElementById('someElement') const inlineStyles = element.style
В этом случае в значение inline Styles запишется объект CSS Style Declaration , который будет содержать в себе все инлайновые стили элемента element .
Чтобы задать стили для элемента, мы можем использовать несколько способов. Либо через css Text , чтобы указать несколько свойств разом. (Тем же эффектом обладает установка стиля через set Attribute ( ) .) Либо через отдельные свойства в style . [ property Name ] .
Следующие две записи работают одинаково и устанавливают несколько стилей в одном выражении:
element.style.cssText = 'color: blue; border: 1px solid black'element.setAttribute('style', 'color:red; border: 1px solid blue;')element.style.cssText = 'color: blue; border: 1px solid black' element.setAttribute('style', 'color:red; border: 1px solid blue;')
Следующая — устанавливает значение определённого свойства, оставляя другие значения стиля нетронутыми:
element.style.color = 'blue'element.style.color = 'blue'
Как понять
Скопировать ссылку «Как понять» Скопировано
Свойство style — это механизм для работы со стилями на элементе. С его помощью можно управлять отображением элементов в «рантайме», то есть во время выполнения скрипта.
Этот механизм позволяет «перетирать» стили, описанные в CSS-таблицах, так как специфичность стилей в атрибуте style выше (за исключением стилей с !important ).
Чтобы указать значение конкретного CSS-свойства, мы можем использовать одноимённое отображение в style :
// Если мы хотим указать color:element.style.color = 'red' // или 'rgb(255,0,0)', или '#f00' // Если хотим указать font-family:element.style.fontFamily = 'Arial'// Если мы хотим указать color: element.style.color = 'red' // или 'rgb(255,0,0)', или '#f00' // Если хотим указать font-family: element.style.fontFamily = 'Arial'
Обратите внимание, что имена свойств в style . [ property Name ] записываются в camelCase, в отличие от CSS-свойств, которые записываются через дефис.
Таким образом font — family превращается в font Family , а, например, background — color — в background Color .
При сомнениях в том, как правильно называется то или иное свойство, воспользуйтесь списком соответствий:
| CSS | JavaScript |
|---|---|
| background | background |
| background-attachment | backgroundAttachment |
| background-color | backgroundColor |
| background-image | backgroundImage |
| background-position | backgroundPosition |
| background-repeat | backgroundRepeat |
| border | border |
| border-bottom | borderBottom |
| border-bottom-color | borderBottomColor |
| border-bottom-style | borderBottomStyle |
| border-bottom-width | borderBottomWidth |
| border-color | borderColor |
| border-left | borderLeft |
| border-left-color | borderLeftColor |
| border-left-style | borderLeftStyle |
| border-left-width | borderLeftWidth |
| border-right | borderRight |
| border-right-color | borderRightColor |
| border-right-style | borderRightStyle |
| border-right-width | borderRightWidth |
| border-style | borderStyle |
| border-top | borderTop |
| border-top-color | borderTopColor |
| border-top-style | borderTopStyle |
| border-top-width | borderTopWidth |
| border-width | borderWidth |
| clear | clear |
| clip | clip |
| color | color |
| cursor | cursor |
| display | display |
| filter | filter |
| float | cssFloat |
| font | font |
| font-family | fontFamily |
| font-size | fontSize |
| font-variant | fontVariant |
| font-weight | fontWeight |
| height | height |
| left | left |
| letter-spacing | letterSpacing |
| line-height | lineHeight |
| list-style | listStyle |
| list-style-image | listStyleImage |
| list-style-position | listStylePosition |
| list-style-type | listStyleType |
| margin | margin |
| margin-bottom | marginBottom |
| margin-left | marginLeft |
| margin-right | marginRight |
| margin-top | marginTop |
| overflow | overflow |
| padding | padding |
| padding-bottom | paddingBottom |
| padding-left | paddingLeft |
| padding-right | paddingRight |
| padding-top | paddingTop |
| page-break-after | pageBreakAfter |
| page-break-before | pageBreakBefore |
| position | position |
| stroke-dasharray | strokeDasharray |
| stroke-dashoffset | strokeDashoffset |
| stroke-width | strokeWidth |
| text-align | textAlign |
| text-decoration | textDecoration |
| text-indent | textIndent |
| text-transform | textTransform |
| top | top |
| vertical-align | verticalAlign |
| visibility | visibility |
| width | width |
На практике
Скопировать ссылку «На практике» Скопировано
Саша Беспоясов советует
Скопировать ссылку «Саша Беспоясов советует» Скопировано
В целом для управления стилями лучше использовать CSS. Можно использовать классы-модификаторы, чтобы придавать какие-то наборы стилей элементу.
Инлайновые стили имеют более высокую специфичность — их труднее переопределить, и это мешает нормальной работе со стилями элемента.
Пример. Мы пишем библиотеку, которая умеет красиво рисовать кнопки. Если мы установим цвет и размер кнопки с помощью инлайновых стилей, то пользователь библиотеки не сможет их легко поменять. Использовать такую библиотеку никто не захочет
Однако есть некоторые случаи, когда манипуляция инлайн-стилями — это ок. Например, если мы хотим управлять отображением элемента точечно, и описывать это в CSS невозможно.
Представьте, что вы хотите сделать анимацию движения точки на экране так, чтобы движение было случайным. В CSS (пока что) этого сделать нельзя, только скриптами. И вот здесь изменение инлайновых стилей как раз кстати.
Для изменения таких стилей используется свойство style .
Используйте style , чтобы изменить или получить инлайновые стили элемента.
🛠 Чтобы переписать стиль элемента полностью, можно использовать css Text или set Attribute .
element.style.cssText = 'color: blue; border: 1px solid black'element.setAttribute('style', 'color:red; border: 1px solid blue;')element.style.cssText = 'color: blue; border: 1px solid black' element.setAttribute('style', 'color:red; border: 1px solid blue;')
🛠 Чтобы обновить значение конкретного свойства, а остальные оставить нетронутыми, используйте style . [ property Name ] :
element.style.color = 'red'element.style.fontFamily = 'Arial'element.style.color = 'red' element.style.fontFamily = 'Arial'
🛠 Чтобы сбросить значение, присвойте ему null .
// Если у элемента прописано style="background-color: red; color: black;",// то такая запись:element.style.backgroundColor = null // . оставит только style="color: black;".// Если у элемента прописано style="background-color: red; color: black;", // то такая запись: element.style.backgroundColor = null // . оставит только style="color: black;".
🛠 Численным свойствам, таким как margin , padding , border — width и другим, следует указывать не только значение, но и единицу измерения:
element.style.marginTop = '50px'element.style.marginTop = '50px'