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

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

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

js
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

Siehe auch