Используемое значение

Используемое значение - CSS свойство, которое используется, когда все вычисления уже выполнены, смотрите вычисленное значение.

После того как user agent закончил свои расчёты каждое свойство CSS имеет своё значение. Используемые значения (например, width, line-height) в пикселях. Используемые значения сокращённых свойств (например, background) согласуются с теми из свойств компонентов (например, background-color или background-size) и с position и float.

Примечание: getComputedStyle() DOM API возвращает решённое значение, которое может быть численным значением или используемым значением, в зависимости от свойства.

Пример

Данный пример показывает вычисление и отображение значения width трёх элементов (обновление при изменении размера):

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) {
  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);

Результат

Difference from computed value

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, or 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

Спецификации

Specification
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
# used-value

Смотреть так же