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

Используемое значение свойства CSS — это его значение после выполнения всех вычислений над вычисленным значением.

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

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

Пример

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

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

Результат

Отличие от вычисленного значения

CSS 2.0 определял только вычисленное значение как последний этап в вычислении свойства. Затем CSS 2.1 ввёл отдельное определение используемого значения. Элемент мог тогда явно унаследовать ширину/высоту родителя, вычисленное значение которого является процентом. Для свойств CSS, которые не зависят от макета (например, display, font-size, или line-height), вычисленные и используемые значения одинаковы. Ниже перечислены свойства CSS 2.1, которые зависят от макета, поэтому они имеют разное вычисленное и используемое значения: (взято из 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

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

Спецификация
Спецификация Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) # used-value

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/used_value