Метад innerWidth

Метад innerWidth дазваляе атрымліваць і змяняць шырыню элемента з улікам яго ўнутраных адступаў. Важна памятаць, што мы будзем атрымліваць 'вылічанае значэнне' шырыні (computed width). Памылкі ў вылічэнні могуць таксама ўзнікаць, калі карыстальнік мяняе памеры старонкі, а таксама, калі элемент ці яго бацькоўскі элемент схаваныя. Значэнне шырыні не ўлічвае таўшчыню мяжы элемента.

Сінтаксіс

Атрымаць шырыню элемента. У некаторых выпадках атрыманыя значэнні могуць быць дробнымі:

$(селектар).innerWidth();

Каб змяніць шырыню элемента - можна перадаць проста лік (напрыклад 400), тады адзінкі вымярэння будуць пікселі, альбо радок, з указаннем адзінак вымярэння (напрыклад '10em'):

$(селектар).innerWidth(новае значэнне);

Таксама мы можам ужыць зададзеную функцыю да кожнага элемента ў наборы. Пры гэтым першым параметрам функцыя атрымае нумар элемента ў наборы, а другім параметрам - бягучае значэнне зададзенай шырыні для канкрэтнага элемента. Значэнне this ўнутры функцыі будзе паказваць на бягучы элемент. Значэнне шырыні элемента зменіцца на тое, якое верне функцыя:

$(селектар).innerWidth(function(нумар у наборы, бягучае значэнне шырыні));

Прыклад

Давайце для параўнання вывядзем інфармацыю аб шырыні абзаца #test, атрыманай метадамі width і innerWidth:

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

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

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();

$('#out1').text(w1);
$('#out2').text(w2);

Мы ўбачым розніцу ў 10px, што з'яўляецца сумай нашых левага і правага ўнутраных адступаў.

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

метад width,
які дазваляе атрымліваць і змяняць шырыню элемента
метад outerWidth,
які дазваляе атрымліваць і змяняць шырыню элемента, улічваючы яго адступы і мяжу