Метод outerWidth

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

Синтаксис

Така можем да получим ширината на елемент. Този метод може да приеме незадължителен параметър под формата на true или false (false е по подразбиране), в зависимост от това - дали ще бъдат взети предвид външните отстъпи или не. В някои случаи получените стойности могат да бъдат дробни:

$(селектор).outerWidth([включващ_margin]);

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

$(селектор).outerWidth(нова стойност, [включващ_margin]);

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

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

Пример

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

<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

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

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);

$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);

Вижте също

метод width,
който позволява получаване и промяна на ширината на елемент
метод innerWidth,
който позволява получаване и промяна на ширината на елемент, като се вземат предвид неговите вътрешни отстъпи