Метод outerWidth

Метод outerWidth омогућава добијање и мењање ширине елемента уз узимање у обзир унутрашњих одступања, границе и селективно - спољашњих одступања елемента. Важно је запамтити да ћемо добијати 'израчунату вредност' ширине (computed width). Грешка у израчунавању може се такође појавити ако корисник мења величине странице, као и ако је елемент или његов родитељ скривен.

Синтакса

Овако можемо добити ширину елемента. Овај метод може прихватити опциони параметар у виду true или false (false је подразумевано), у зависности од тога да ли ће се узимати у обзир спољашња одступања или не. У неким случајевима добијене вредности могу бити разломљене:

javascript$(селектор).outerWidth([укључујући_margin]);

Да би се променила ширина елемента - може се проследити једноставно број (на пример 400), тада ће јединице мере бити пиксели, или стринг, са навођењем јединица мере (на пример '10em'):

javascript$(селектор).outerWidth(нова вредност, [укључујући_margin]);

Такође можемо применити задату функцију на сваки елемент у сету. При томе ће функција као први параметар добити редни број елемента у сету, а као други параметар - тренутну вредност задате ширине за конкретни елемент. this унутар функције ће упућивати на тренутни елемент. Вредност ширине елемента ће се променити у ону коју функција врати:

javascript$(селектор).outerWidth(function(редни број у сету, тренутна вредност ширине));

Пример

Хајде да за поређење прикажемо информације о ширини параграфа #test, добијене методама width, innerWidth и outerWidth:

html<p id="test">текст</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

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

javascriptlet 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);

Погледајте такође