1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
---
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.<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>
|
