.style — JavaScript — Дока
Кратко
СкопированоСвойство style получает и устанавливает инлайновые стили элемента, то есть те, что записываются через HTML-атрибут style.
С помощью него можно управлять стилем элемента. Специфичность этого свойства такая же, как у атрибута style.
Как пишется
СкопированоЧтобы получить значения инлайновых стилей с помощью свойства style, мы можем записать:
const element = document.getElementById('someElement')const inlineStyles = element.style
const element = document.getElementById('someElement')
const inlineStyles = element.style
В этом случае в значение inline запишется объект CSS, который будет содержать в себе все инлайновые стили элемента element.
Чтобы задать стили для элемента, мы можем использовать несколько способов.
Либо через css, чтобы указать несколько свойств разом. (Тем же эффектом обладает установка стиля через set.) Либо через отдельные свойства в style.
Следующие две записи работают одинаково и устанавливают несколько стилей в одном выражении:
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 записываются в camelCase, в отличие от CSS-свойств, которые записываются через дефис.
Таким образом font превращается в font, а, например, background — в background.
При сомнениях в том, как правильно называется то или иное свойство, воспользуйтесь списком соответствий:
CSS-свойства в JS-нотации| 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 | |
| visibility | visibility |
| width | width |
На практике
СкопированоСаша Беспоясов советует
СкопированоВ целом для управления стилями лучше использовать CSS.
Можно использовать классы-модификаторы, чтобы придавать какие-то наборы стилей элементу.
Инлайновые стили имеют более высокую специфичность — их труднее переопределить, и это мешает нормальной работе со стилями элемента.
Пример. Мы пишем библиотеку, которая умеет красиво рисовать кнопки. Если мы установим цвет и размер кнопки с помощью инлайновых стилей, то пользователь библиотеки не сможет их легко поменять. Использовать такую библиотеку никто не захочет
Однако есть некоторые случаи, когда манипуляция инлайн-стилями — это ок. Например, если мы хотим управлять отображением элемента точечно, и описывать это в CSS невозможно.
Представьте, что вы хотите сделать анимацию движения точки на экране так, чтобы движение было случайным. В CSS (пока что) этого сделать нельзя, только скриптами. И вот здесь изменение инлайновых стилей как раз кстати.
Для изменения таких стилей используется свойство style.
Используйте style, чтобы изменить или получить инлайновые стили элемента.
🛠 Чтобы переписать стиль элемента полностью, можно использовать css или set.
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 = 'red'element.style.fontFamily = 'Arial'
element.style.color = 'red'
element.style.fontFamily = 'Arial'
🛠 Чтобы сбросить значение, присвойте ему null.
// Если у элемента прописано,// то такая запись:element.style.backgroundColor = null// ...оставит только.
// Если у элемента прописано,
// то такая запись:
element.
style.backgroundColor = null
// ...оставит только.
style.backgroundColor = null
// ...оставит только.
🛠 Численным свойствам, таким как margin, padding, border и другим, следует указывать не только значение, но и единицу измерения:
element.style.marginTop = '50px'
element.style.marginTop = '50px'
Стиль элемента HTML DOM Свойство
❮ Назад ❮ Ссылка на объект элемента Далее ❯
Примеры
Изменить цвет «myh2»:
document.getElementById(«myh2»).style.color = «red»;
Попробуйте сами »Получите значение верхней границы «myP»:
let value = document.getElementById(«myP»).style.borderTop;
Попробуйте сами »Описание
Свойство style возвращает значения атрибута style элемента.
Свойство стиля возвращает объект CSSStyleDeclaration .
Объект CSSStyleDeclaration содержит все свойства встроенных стилей для элемента.
Он не содержит никаких свойств стиля, установленных в разделе
Примечание 1
Вы не можете установить такой стиль:
element.style = "color:red";
Вы должны использовать такое свойство CSS:
element.style.backgroundColor = "red";
Попробуйте сами »Примечание 2
Синтаксис JavaScript немного отличается от синтаксиса CSS:
backgroundColor / background-color.
См. наш полный справочник по объектам стилей.
Примечание 3
Используйте это свойство стиля вместо метода setAttribute(), чтобы предотвратить перезапись других свойств в атрибуте стиля.
См. также:
Учебное пособие по CSS
Справочник по CSS
Объект стиля
Тег HTML