Metodi outerWidth i outerHeight u jQuery

Poslednji par metoda su outerWidth i outerHeight, pomoću kojih je moguće dobiti širinu i visinu elementa uključujući sve margine i ivice, a mogu se i zanemariti spoljašnje margine margin.

Razmotrimo primer. Neka imamo pasus:

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

CSS izgleda ovako:

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

Hajde da dobijemo vrednosti širine i visine pasusa #test, uključujući unutrašnje margine i ivice, za to u ove metode potrebno je proslediti false ili ostaviti zagrade praznim (pošto to već podrazumevano stoji u metodu):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Širina: ' + w + ' Visina: ' + h);

Sada će se naše vrednosti razlikovati za još 4px, pošto je debljina ivica po 2px sa svake strane.

A sada hajde da dobijemo vrednosti širine i visine pasusa #test, uključujući sve margine i ivice, za to u metode outerWidth i outerHeight potrebno je proslediti true:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Širina: ' + w + ' Visina: ' + h);

Sada će se naše vrednosti razlikovati od prethodnih za još 20px, pošto su spoljašnje margine po 10px sa svake strane.

Dopunite rešenje prethodnih zadataka - ispišite u treći pasus ispod div-a #wrapper vrednosti širine i visine div-a #wrapper - uključujući unutrašnje margine i ivice, ali bez spoljašnjih margina. U četvrti pasus ispišite vrednosti širine i visine div-a #wrapper uključujući sve margine i ivice.

Takođe pomoću metoda outerWidth i outerHeight možemo promeniti vrednosti širine i visine elemenata. Na primer, postavimo širinu div-a #test1 na 250px, a visinu #test2 na 200px:

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

Svi navedeni metodi za rad sa dimenzijama elementa takođe predviđaju mogućnost primene funkcije na svaki element u setu.