.width()
Получить и/или установить внутреннюю ширину элемента.
width(element [, value])
Метод .width()
может быть полезен при работе с внутренней шириной элемента.
Метод позволяет получать и устанавливать ширину требуемому элементу.
Следующий параметр может быть передан функции:
Параметр | Тип | Описание |
---|---|---|
element |
Node | Элемент HTML. |
value |
Number | Новая внутренняя ширина элемента. |
Использование
Если имеются border
(граница) или padding
(внутренний отступ), то их размеры могут вычитаться,
итоговый результат определится в зависимости от CSS свойства box-sizing
.
<div id="example-blank" class="uk-width-medium">Карточка</div>
<div id="example-card" class="uk-width-medium uk-card uk-card-default uk-card-body">Карточка</div>
<style>
#example-card-content-box {
box-sizing: content-box;
}
</style>
<div id="example-card-content-box" class="uk-width-medium uk-card uk-card-body">Карточка</div>
const myElBlank = util.$('#example-blank'),
myElCard = util.$('#example-card'),
myElCardCB = util.$('#example-card-content-box');
// Получим текущую ширину
let myCurrentBlank = util.width(myElBlank),
myCurrentCard = util.width(myElCard),
myCurrentCardCB = util.width(myElCardCB);
console.log(myCurrentBlank, myCurrentCard, myCurrentCardCB)
Результат
300 220 300
// Установим новую ширину
util.width(myElBlank, 100); // style="width: 100px;"
util.width(myElCard, 100); // style="width: 180px;"
// Получим новую ширину
let myAfterBlank = util.width(myElBlank),
myAfterCard = util.width(myElCard);
console.log(myAfterBlank, myAfterCard)
Результат
100 100