Used value
The used value of a CSS property is its value after all calculations have been performed on the computed value.
After the {{glossary("user agent")}} has finished its calculations, every CSS property has a used value. The used values of dimensions (e.g., {{cssxref("width")}}, {{cssxref("line-height")}}) are in pixels. The used values of shorthand properties (e.g., {{cssxref("background")}}) are consistent with those of their component properties (e.g., {{cssxref("background-color")}} or {{cssxref("background-size")}}) and with {{cssxref("position")}} and {{cssxref("float")}}.
[!NOTE] The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns the resolved value, which may either be the computed value or the used value, depending on the property.
Example
This example computes and displays the used width
value of three elements (updates on resize):
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>
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;
}
JavaScript
function updateUsedWidth(id) {
const div = document.getElementById(id);
const par = div.querySelector(".show-used-width");
const 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);