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:
<p id="test">text</p>
<p id="out"></p>
CSS näeb välja selline:
p {
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):
let 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:
let 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.
Täiendage eelmiste ülesannete lahendust - väljastage
kolmandasse lõiku divi #wrapper all
divi #wrapper laiuse ja kõrguse väärtused -
koos sisemiste polsterduste ja piiridega, kuid ilma
väliste polsterdusteta. Neljandasse lõiku väljastage
divi #wrapper laiuse ja kõrguse väärtused
koos kõigi polsterduste ja piiridega.
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:
$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);
Kõik elemendi mõõtmetega töötamise meetodid sisaldavad ka võimalust rakendada funktsiooni igale elemendile komplektis.