Verwendeter Wert
Der verwendete Wert einer CSS-Eigenschaft ist ihr Wert, nachdem alle Berechnungen auf den berechneten Wert durchgeführt wurden.
Nachdem der User Agent seine Berechnungen abgeschlossen hat, hat jede CSS-Eigenschaft einen verwendeten Wert. Die verwendeten Werte von Dimensionen (z.B. width
, line-height
) sind in Pixeln. Die verwendeten Werte von Kurzschreibweise-Eigenschaften (z.B. background
) sind konsistent mit denen ihrer Komponenten-Eigenschaften (z.B. background-color
oder background-size
) und mit position
und float
.
Hinweis:
Die getComputedStyle()
DOM-API gibt den aufgelösten Wert zurück, der je nach Eigenschaft entweder der berechnete Wert oder der verwendete Wert sein kann.
Beispiel
Dieses Beispiel berechnet und zeigt den verwendeten width
-Wert von drei Elementen an (Aktualisierung bei Größenänderung):
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);
Ergebnis
Unterschied zum berechneten Wert
CSS 2.0 definierte nur den berechneten Wert als den letzten Schritt bei der Berechnung einer Eigenschaft. Dann führte CSS 2.1 die klare Definition des verwendeten Wertes ein. Ein Element konnte dann explizit eine Breite/Höhe von einem Elternteil erben, dessen berechneter Wert ein Prozentsatz ist. Für CSS-Eigenschaften, die nicht vom Layout abhängen (z.B. display
, font-size
oder line-height
), sind die berechneten Werte und die verwendeten Werte gleich. Die folgenden sind die CSS 2.1 Eigenschaften, die vom Layout abhängen und daher einen unterschiedlichen berechneten und verwendeten Wert haben: (entnommen aus 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
Spezifikationen
Specification |
---|
Unknown specification # used-value |
CSS Cascading and Inheritance Level 5 # used-value |