jQuery даги outerWidth ва outerHeight методлари

Охирги жуфт методлар - outerWidth ва outerHeight, уларнинг ёрдамида элементнинг ен ва бўйини ҳамма маржа ва чегараларни ҳисобга олган ҳолда олиш мумкин, ёки ташқи маржаларни margin ҳисобга олмаслик мумкин.

Мисолни кўриб чиқайлик. Бизда абзац бор деб фараз қилайлик:

<p id="test">матн</p>
<p id="out"></p>

CSS шундай кўринадӣ:

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

Келинг, #test абзацнинг эн ва бўйи қийматларини олайлик, ички маржа ва чегараларни ҳисобга олган ҳолда, бунинг учун ушбу методларга false берӣш керак ёки қавсларни бўш қолдириш мумкин (чунки методда сунъий қиймат шундай):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Эн: ' + w + ' Бўй: ' + h);

Энди бизнинг қийматларимиз яна 4px га фарқ қилади, чунки ҳар томондан чегара қалинлиги 2px.

Энди эса келинг, #test абзацнинг эн ва бўйи қийматларини олайлик, ҳамма маржа ва чегараларни ҳисобга олган ҳолда, бунинг учун outerWidth ва outerHeight методларига true берӣш керак:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Эн: ' + w + ' Бўй: ' + h);

Энди бизнинг қийматларимиз олдингилардан яна 20px га фарқ қилади, чунки бизнинг ташқи маржаларимиз ҳар томондан 10px.

Олдинги вазифалар ечимини тўлдиринг - #wrapper диви остидаги учинчи абзацга #wrapper дивининг эн ва бўйи қийматларини чиқаринг - ички маржа ва чегараларни ҳисобга олган, лекин ташқи маржаларни ҳисобга олмаган ҳолда. Тўртинчи абзацга #wrapper дивининг эн ва бўйи қийматларини ҳамма маржа ва чегараларни ҳисобга олган ҳолда чиқаринг.

Шунингдек, outerWidth ва outerHeight методлари ёрдамида биз элементларнинг эн ва бўйи қийматларини ўзгартиришимиз мумкин. Мисол учун, келинг #test1 дивининг энини 250px га тенглаштирамиз, #test2 нинг бўйини эса 200px га:

$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

Элемент ўлчамлари билан ишлайдиган ҳамма кўрсатилган методлар шунга имкон берадики, тўпламдаги ҳар бир элементга функция қўллаш.