Метод innerWidth

Методът innerWidth позволява получаване и промяна на ширината на елемент, като се вземат предвид неговите вътрешни отстъпи. Важно е да запомните, че ще получаваме 'изчислената стойност' на ширината (computed width). Грешки в изчислението могат да възникнат също, ако потребителят променя размерите на страницата, както и ако елементът или неговият родител са скрити. Стойността на ширината не взема предвид дебелината на границата на елемента.

Синтаксис

Получаване на ширината на елемент. В някои случаи получените стойности могат да бъдат дробни:

javascript$(селектор).innerWidth();

За да промените ширината на елемент - може да подадете просто число (например 400), тогава мерните единици ще бъдат пиксели, или низ, с указание на мерните единици (например '10em'):

javascript$(селектор).innerWidth(нова стойност);

Също така можем да приложим зададена функция към всеки елемент в набора. При това първият параметър на функцията ще получи номера на елемента в набора, а вторият параметър - текущата стойност на зададената ширина за конкретния елемент. Стойността this във функцията ще сочи към текущия елемент. Стойността на ширината на елемента ще се промени на тази, която функцията върне:

javascript$(селектор).innerWidth(function(номер в набор, текуща стойност на ширината));

Пример

Нека за сравнение изведем информация за ширината на абзац #test, получена чрез методите width и innerWidth:

html<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>

cssp {
  margin: 10px;
  padding: 5px;
  border: 2px solid blue;
}

javascriptlet w1 = $('#test').width();
let w2 = $('#test').innerWidth();

$('#out1').text(w1);
$('#out2').text(w2);

Ще видим разлика от 10px, което е сумата от нашите ляв и десен вътрешни отстъпи.

Вижте също