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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
---
title: Используемое значение
slug: Web/CSS/used_value
tags:
- CSS
- Reference
translation_of: Web/CSS/used_value
---
<div>{{cssref}}</div>
<div><strong>Используемое значение </strong>- <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS </a>свойство, которое используется, когда все вычисления уже выполнены, смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value">вычисленное значение</a>.</div>
<article>
<p>После того как {{glossary("user agent")}} закончил свои расчёты каждое свойство CSS имеет своё значение. Используемые значения (например, {{cssxref("width")}}, {{cssxref("line-height")}}) в пикселях. Используемые значения сокращённых свойств (например, {{cssxref("background")}}) согласуются с теми из свойств компонентов (например, {{cssxref("background-color")}} или {{cssxref("background-size")}}) и с {{cssxref("position")}} и {{cssxref("float")}}.</p>
<div class="blockIndicator note">
<p><strong>Замечание</strong>: {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API возвращает <a href="/ru/docs/">решённое значение</a>, которое может быть <a href="/ru/docs/">численным значением</a> или <a href="/ru/docs/">используемым значением</a>, в зависимости от свойства.</p>
</div>
<h2 id="Пример">Пример</h2>
<p>Данный пример показывает вычисление и отображение значения <code>width</code> трёх элементов (обновление при изменении размера):</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div id="no-width">
<p>No explicit width.</p>
<p class="show-used-width">..</p>
<div id="width-50">
<p>Explicit width: 50%.</p>
<p class="show-used-width">..</p>
<div id="width-inherit">
<p>Explicit width: inherit.</p>
<p class="show-used-width">..</p>
</div>
</div>
</div></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">#no-width {
width: auto;
}
#width-50 {
width: 50%;
}
#width-inherit {
width: inherit;
}
/* Make results easier to see */
div {
border: 1px solid red;
padding: 8px;
}</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre><code>function updateUsedWidth(id) {
var div = document.querySelector(`#${id}`);
var par = div.querySelector('.show-used-width');
var wid = window.getComputedStyle(div)["width"];
par.textContent = `Used width: ${wid}.`;
}
function updateAllUsedWidths() {
updateUsedWidth("no-width");
updateUsedWidth("width-50");
updateUsedWidth("width-inherit");
}
updateAllUsedWidths();
window.addEventListener('resize', updateAllUsedWidths);</code></pre>
<h3 id="Результат">Результат</h3>
<p>{{ EmbedLiveSample('Пример', '80%', 372) }}</p>
<h2 id="Difference_from_computed_value">Difference from computed value</h2>
<p>CSS 2.0 defined only <em>computed value</em> as the last step in a property's calculation. Then, CSS 2.1 introduced the distinct definition of used value. An element could then explicitly inherit a width/height of a parent, whose computed value is a percentage. For CSS properties that don't depend on layout (e.g., <code>display</code>, <code>font-size</code>, or <code>line-height</code>), the computed values and used values are the same. The following are the CSS 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from <a href="http://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specified, computed, and actual values</a>):</p>
<ul>
<li><code>background-position</code></li>
<li><code>bottom</code>, <code>left</code>, <code>right</code>, <code>top</code></li>
<li><code>height</code>, <code>width</code></li>
<li><code>margin-bottom</code>, <code>margin-left</code>, <code>margin-right</code>, <code>margin-top</code></li>
<li><code>min-height</code>, <code>min-width</code></li>
<li><code>padding-bottom</code>, <code>padding-left</code>, <code>padding-right</code>, <code>padding-top</code></li>
<li><code>text-indent</code></li>
</ul>
<h2 id="Спецификация">Спецификация</h2>
<table>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<header></header>
</article>
<article>
<header></header>
</article>
<h2 id="Смотреть_так_же">Смотреть так же:</h2>
<ul>
<li>{{domxref("window.getComputedStyle")}}</li>
<li>{{CSS_key_concepts}}</li>
</ul>
|
