Метад 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,
які дазваляе атрымліваць і змяняць шырыню элемента, улічваючы яго ўнутраныя адступы