Метод 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,
кој овозможува добивање и менување на ширината на елементот, земајќи ги предвид неговите внатрешни отстапувања