Вжите значення

Вжите значення властивості CSS – це її значення після того, як над обчисленим значенням були виконані всі обчислення.

Після того, як користувацький агент завершив усі необхідні обчислення, кожна властивість CSS отримує вжите значення. Вжиті значення розмірностей (наприклад, width, line-height) – у пікселях. Вжиті значення властивостей-скорочень (наприклад, background) узгоджені зі значеннями своїх властивостей-складових (наприклад, background-color або background-size) та зі значеннями position та float.

[!NOTE] API DOM getComputedStyle() повертає вирішене значення, котре може бути або обчисленим значенням, або вжитим значенням, залежно від властивості.

Приклад

Цей приклад обчислює та виводить вжите значення width трьох елементів (оновлюється при зміні розміру):

HTML

<div id="no-width">
  <p>Без явно заданої ширини.</p>
  <p class="show-used-width">..</p>

  <div id="width-50">
    <p>Явно задана ширина: 50%.</p>
    <p class="show-used-width">..</p>

    <div id="width-inherit">
      <p>Явно задана ширина: inherit.</p>
      <p class="show-used-width">..</p>
    </div>
  </div>
</div>

CSS

#no-width {
  width: auto;
}

#width-50 {
  width: 50%;
}

#width-inherit {
  width: inherit;
}

/* Для яскравішого підкреслення результатів */
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 = `Вжита ширина: ${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: Задані, обчислені та фактичні значення):

  • 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) Specification (CSS 2.2)
# used-value

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.