jQuery outerWidth ja outerHeight meetodid

Viimane meetodite paar - outerWidth ja outerHeight, mille abil on võimalik saada elemendi laius ja kõrgus koos kõigi polsterduste ja piiridega, aga võib ka mitte arvestada väliseid polsterdusi margin.

Vaatleme näidet. Olgu meil lõik:

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

CSS näeb välja selline:

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

Saame lõigu #test laiuse ja kõrguse väärtused, arvestades sisemisi polsterdusi ja piire. Selleks tuleb neile meetoditele edastada false või jätta sulud tühjaks (kuna see on meetodis vaikimisi seatud):

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

Nüüd erinevad meie väärtused veel 4px võrra, kuna piiride paksus on mõlemal küljel 2px.

Nüüd saame lõigu #test laiuse ja kõrguse väärtused, arvestades kõiki polsterdusi ja piire. Selleks tuleb meetoditele outerWidth ja outerHeight edastada true:

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

Nüüd erinevad meie väärtused eelmistest veel 20px võrra, kuna meil on välised polsterdused mõlemal küljel 10px.

Samuti saame meetodite outerWidth ja outerHeight abil muuta elementide laiuse ja kõrguse väärtusi. Näiteks määrame divi #test1 laiuse võrdseks 250px ja divi #test2 kõrguse - 200px:

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

Kõik elemendi mõõtmetega töötamise meetodid sisaldavad ka võimalust rakendada funktsiooni igale elemendile komplektis.