Вжите значення
Вжите значення властивості CSS – це її значення після того, як над обчисленим значенням були виконані всі обчислення.
Після того, як користувацький агент завершив усі необхідні обчислення, кожна властивість CSS отримує вжите значення. Вжиті значення розмірностей (наприклад, width
, line-height
) – у пікселях. Вжиті значення властивостей-скорочень (наприклад, background
) узгоджені зі значеннями своїх властивостей-складових (наприклад, background-color
або background-size
) та зі значеннями position
та float
.
Примітка: 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 |
Дивіться також
window.getComputedStyle
- Ключові концепції CSS: