Метад 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">text</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);

Глядзіце таксама