diff options
Diffstat (limited to 'files/ru/web/api/elementcssinlinestyle/style/index.html')
| -rw-r--r-- | files/ru/web/api/elementcssinlinestyle/style/index.html | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/files/ru/web/api/elementcssinlinestyle/style/index.html b/files/ru/web/api/elementcssinlinestyle/style/index.html new file mode 100644 index 0000000000..683bfa1101 --- /dev/null +++ b/files/ru/web/api/elementcssinlinestyle/style/index.html @@ -0,0 +1,78 @@ +--- +title: HTMLElement.style +slug: Web/API/HTMLElement/style +tags: + - API + - HTML DOM + - HTMLElement + - NeedsBrowserAgnosticism + - NeedsBrowserCompatibility + - NeedsMarkupWork + - NeedsSpecTable + - Свойство + - Ссылки +translation_of: Web/API/ElementCSSInlineStyle/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.<property></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] + "' > '" + 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> |