---
title: HTMLElement.style
slug: Web/API/ElementCSSInlineStyle/style
tags:
  - API
  - HTML DOM
  - HTMLElement
  - NeedsBrowserAgnosticism
  - NeedsBrowserCompatibility
  - NeedsMarkupWork
  - NeedsSpecTable
  - Свойство
  - Ссылки
translation_of: Web/API/ElementCSSInlineStyle/style
original_slug: Web/API/HTMLElement/style
---
<h2 id="Кратко">Кратко</h2>

<div>
<div>{{ APIRef("HTML DOM") }}</div>
</div>

<p>Свойство<strong> </strong><code><strong>HTMLElement.style</strong></code> используется для получения и установки инлайновых стилей. При получении возвращается объект <a href="/en-US/docs/DOM/CSSStyleDeclaration" title="DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> , который содержит список из всех свойств стилей для этого элемента с значениями заданными  для атрибутов , что определённы  в инлайновом стиле (см. <a href="/en-US/docs/Web/HTML/Global_attributes#style"><code>атрибут</code> стиля</a>) элемента. См. <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">CSS Properties Reference</a> для получения списка CSS свойств применимых вместе со style.  </p>

<h3 id="Настройка_стилей">Настройка стилей</h3>

<p>Свойство style имеет тот же приоритет (и выше) в каскаде CSS как и прямая декларация стиля через атрибут style, полезен для настройки стиля отдельного специфичного элемента.</p>

<p>Стили не следует устанавливать непосредственно через свойство <code>style</code> (например <code>elt.style = "color: blue;"</code>), поскольку оно считается доступным только для чтения и атрибут style возвращает объект <code>CSSStyleDeclaration</code> который доступен только для чтения. Вместо этого стили могут быть установлены путём присвоения значений свойствам <code>style</code>. Для добавления определённых стилей для элемента без изменения других свойств стилей предпочтительно использовать отдельные свойства <code>style</code> (например <code>elt.style.color = '...'</code>).
При использовании <br><code>elt.style.cssText = '...'</code> или <code>elt.setAttribute('style','...')</code> устанавливаются стили перезаписывая уже существующие. Обратите внимание, что имена свойств стилей задаются в camel-case а не в kebab-case <code>elt.style.&lt;property&gt;</code> (т.е., <code>elt.style.fontSize</code>, а не <code>elt.style.font-size</code>).</p>

<p>Объявленные стили сбрасываются присваиванием значения <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">null</span></font>, <br><code>elt.style.color = null</code></p>

<h2 id="Example" name="Example">Примеры</h2>

<pre><code>// Устанавливает несколько стилей в одном выражении
elt.style.cssText = "color: blue; border: 1px solid black";
// Или
elt.setAttribute("style", "color:red; border: 1px solid blue;");

// Устанавливает определённый стиль оставляя другие значения стиля нетронутыми
elt.style.color = "blue";</code></pre>

<h3 id="Получение_стиль-информации">Получение стиль-информации</h3>

<p>Свойство <code>style</code> в основном не имеет пользы в части информации о стиле элемента, оно только олицетворяет собой набор CSS деклараций атрибутов style элемента, а не тех которые проистекают из стиль-правил откуда-либо ещё, таких как стилевые правила раздела {{HTMLElement("head")}}, или внешней таблицы стилей. Для получения значений всех CSS свойств элемента вы должны использовать вместо этого {{domxref("window.getComputedStyle()")}}.</p>

<div style="overflow: hidden;">
<pre class="brush:js">var div = document.getElementById("div1");
div.style.marginTop = ".25in";</pre>
</div>

<p>Следующий код показывает имена всех свойств стиля, значений, заданных явно для элемента elt и унаследованных "рассчитанных" значений:</p>

<pre class="brush:js">var elt = document.getElementById("elementIdHere");
var out = "";
var st = elt.style;
var cs = window.getComputedStyle(elt, null);
for (x in st) {
  out += "  " + x + " = '" + st[x] + "' &gt; '" + cs[x] + "'\n";
}</pre>

<h2 id="Specification" name="Specification">Спецификация</h2>

<p><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p>

<p><a href="https://www.w3.org/TR/cssom-1/#the-elementcssinlinestyle-interface">CSSOM: ElementCSSInlineStyle</a></p>

<h2 id="Совместимость">Совместимость</h2>



<p>{{Compat("api.HTMLElement.style")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a href="/en-US/docs/DOM/Using_dynamic_styling_information" title="DOM/Using dynamic styling information">Использование динамической стиль-информации</a></li>
</ul>