Az outerWidth és outerHeight metódusok a jQuery-ben

Az utolsó metóduspár - a outerWidth és a outerHeight, amelyek segítségével megkaphatjuk egy elem szélességét és magasságát minden padding és border figyelembevételével, vagy figyelmen kívül hagyhatjuk a külső margókat margin.

Nézzünk egy példát. Tegyük fel, hogy van egy bekezdésünk:

html<p id="test">szöveg</p>
<p id="out"></p>

A CSS így néz ki:

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

Kapjuk meg a #test bekezdés szélességének és magasságának értékeit a belső padding és a border-ek figyelembevételével. Ehhez a metódusoknak false-ot kell átadnunk, vagy üresen kell hagynunk a zárójeleket (mivel ez alapértelmezetten be van állítva a metódusban):

javascriptlet w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Szélesség: ' + w + ' Magasság: ' + h);

Most az értékeink még 4px-vel fognak eltérni, mivel a border-ek vastagsága mindkét oldalon 2px.

Most pedig kapjuk meg a #test bekezdés szélességének és magasságának értékeit az összes padding és border figyelembevételével. Ehhez a outerWidth és outerHeight metódusoknak true-t kell átadnunk:

javascriptlet w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Szélesség: ' + w + ' Magasság: ' + h);

Most az értékeink a korábbiaktól még 20px-vel fognak eltérni, mivel a külső margóink mindkét oldalon 10px-esek.

A outerWidth és outerHeight metódusokkal mi módosíthatjuk az elemek szélességi és magassági értékeit is. Például állítsuk a #test1 div szélességét 250px-re, a #test2 magasságát pedig 200px-re:

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

Az elemek méreteivel dolgozó összes említett metódus lehetőséget biztosít arra is, hogy függvényt alkalmazzunk a halmaz minden elemére.