used value of a CSS property is its value after all calculations have been performed on the computed value .
After the
用户代理
has finished its calculations, every CSS property has a used value. The used values of dimensions (e.g.,
width
,
line-height
) are in pixels. The used values of shorthand properties (e.g.,
background
) are consistent with those of their component properties (e.g.,
background-color
or
background-size
) and with
position
and
float
.
注意：
getComputedStyle()
DOM API returns the
resolved value
, which may either be the
computed value
或
used value
, depending on the property.
This example computes and displays the used
width
value of three elements (updates on resize):
<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>
#no-width {
width: auto;
}
#width-50 {
width: 50%;
}
#width-inherit {
width: inherit;
}
/* Make results easier to see */
div {
border: 1px solid red;
padding: 8px;
}
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);
CSS 2.0 defined only
computed value
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.,
display
,
font-size
，或
line-height
), 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
CSS 2.1 Changes: Specified, computed, and actual values
):
background-position
bottom
,
left
,
right
,
top
height
,
width
margin-bottom
,
margin-left
,
margin-right
,
margin-top
min-height
,
min-width
padding-bottom
,
padding-left
,
padding-right
,
padding-top
text-indent
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Level 2 (Revision 2)
The definition of 'used value' in that specification. |
工作草案 | 无变化。 |
|
CSS Level 2 (Revision 1)
The definition of 'used value' in that specification. |
推荐 | 初始定义。 |
window.getComputedStyle