Metodi outerWidth in outerHeight v jQuery

Zadnji par metod - outerWidth in outerHeight, s katerimi je mogoče dobiti širino in višino elementa ob upoštevanju vseh robov in obrobnih okvirjev, lahko pa tudi ne upoštevamo zunanjih robov margin.

Oglejmo si primer. Recimo, da imamo odstavek:

<p id="test">text</p>
<p id="out"></p>

CSS je videti takole:

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

Pridobimo vrednosti širine in višine odstavka #test, ob upoštevanju notranjih robov in obrobnih okvirjev, za to je potrebno metodam posredovati false ali pustiti oklepaje prazne (ker je to v metodi privzeto nastavljeno):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

Zdaj se bodo naše vrednosti razlikovale še za 4px, saj je debelina obrobnih okvirjev po 2px na vsaki strani.

In zdaj pridobimo vrednosti širine in višine odstavka #test, ob upoštevanju vseh robov in obrobnih okvirjev, za to je potrebno metodama outerWidth in outerHeight posredovati true:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

Zdaj se bodo naše vrednosti razlikovale od prejšnjih še za 20px, ker so zunanji robovi po 10px na vsaki strani.

Dopolnite rešitev prejšnjih nalog - izpišite v tretji odstavek pod div-om #wrapper vrednosti širine in višine div-a #wrapper - ob upoštevanju notranjih robov in obrobnih okvirjev, vendar brez zunanjih robov. V četrti odstavek izpišite vrednosti širine in višine div-a #wrapper ob upoštevanju vseh robov in obrobnih okvirjev.

Tudi z metodama outerWidth in outerHeight lahko spremenimo vrednosti širine in višine elementov. Na primer, nastavimo širino div-a #test1 na 250px, višino #test2 pa na 200px:

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

Vse navedene metode za delo z velikostmi elementa prav tako predvidijo možnost uporabe funkcije za vsak element v nizu.