В этом руководстве вы узнаете , как использовать свойство CSS для управления встроенным стилем элементов HTML — Style JavaScript.
Чтобы установить встроенный стиль элемента, вы используете свойство style этого элемента:
element.style
Свойство style возвращает доступный только для чтения объект CSSStyleDeclaration, содержащий список свойств CSS. Например, чтобы установить цвет элемента на red, вы используете следующий код:
element.style.color = 'red';
Если свойство CSS содержит дефисы( - ), например -webkit-text-stroke, вы можете использовать нотацию, подобную массиву( [] ), для доступа к свойству:
element.style.['-webkit-text-stock'] = 'unset';
В следующей таблице показаны общие свойства CSS:
| 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 |
| z-index | zIndex |
Чтобы полностью переопределить существующий встроенный стиль, вы устанавливаете свойство cssText объекта style. Например:
element.style.cssText = 'color:red;
background-color:yellow';
Или вы можете использовать метод setAttribute() :
element.setAttribute('style','color:red;background-color:yellow');Установив встроенный стиль, вы можете изменить одно или несколько свойств CSS:
element.style.color = 'blue';
Если вы не хотите полностью перезаписывать существующие свойства CSS, вы можете соединить новое свойство CSS с cssText следующим образом:
element.style.cssText += 'color:red;background-color:yellow';
В этом случае оператор += добавляет новую строку стиля к существующей.
Следующая вспомогательная функция css() используется для установки нескольких стилей для элемента из объекта пар ключ-значение:
function css(e, styles) {
for(const property in styles)
e.style[property] = styles[property];
}Вы можете использовать эту функцию css() для установки нескольких стилей для элемента с идентификатором #content следующим образом:
let content = document.querySelector('#content');
css(content, { background: 'yellow', border: 'solid 1px red'});В следующем примере объект style используется для установки свойств CSS абзаца с идентификатором content :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Style Demo</title>
</head>
<body>
<p id="content">JavaScript Setting Style Demo!</p>
<script>
let p = document.querySelector('#content');
p.style.color = 'red';
p.style.fontWeight = 'bold';
</script>
</body>
</html>Как это работает:
- Сначала выберите элемент абзаца с идентификатором
content, используя методquerySelector(). - Затем установите свойства цвета и толщины шрифта абзаца, задав
colorиfontWeightобъектаstyle.
Получение встроенных стилей
Свойство style возвращает встроенные стили элемента. На практике это не очень полезно, потому что свойство style не возвращает правила, полученные из других источников, например, стили из внешней таблицы стилей.
Чтобы применить все стили к элементу, вы должны использовать метод window.getComputedStyle().