jQueryn outerWidth- ja outerHeight-metodit

Viimeinen metodipari - outerWidth ja outerHeight, joiden avulla on mahdollista saada elementin leveys ja korkeus ottaen huomioon kaikki marginaalit ja reunukset, tai voi jättää huomiotta ulkoiset marginaalit margin.

Tarkastellaan esimerkkiä. Oletetaan, että meillä on kappale:

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

CSS näyttää tältä:

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

Saadaan kappaleen #test leveys- ja korkeusarvot ottaen huomioon sisäiset täytöt ja reunukset. Tätä varten näihin metodeihin on välitettävä false tai jätettävä sulut tyhjiksi (koska se on oletusarvoisesti metodissa):

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

Nyt arvomme eroavat vielä 4px:llä, koska reunuksen paksuus on 2px kummaltakin puolelta.

Ja nyt saadaan kappaleen #test leveys- ja korkeusarvot ottaen huomioon kaikki marginaalit ja reunukset. Tätä varten outerWidth- ja outerHeight- metodeihin on välitettävä true:

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

Nyt arvomme eroavat edellisistä vielä 20px:llä, koska ulkoiset marginaalit ovat 10px kummaltakin puolelta.

Täydennä edellisten tehtävien ratkaisua - tulosta kolmanteen kappaleeseen divin #wrapper alle divin #wrapper leveys- ja korkeusarvot - sisäisillä täytöillä ja reunuksilla, mutta ilman ulkoisia marginaaleja. Neljänteen kappaleeseen tulosta divin #wrapper leveys- ja korkeusarvot kaikkien marginaalien ja reunuksien kanssa.

Myös outerWidth- ja outerHeight-metodien avulla voimme muuttaa elementtien leveys- ja korkeusarvoja. Esimerkiksi asetetaan divin #test1 leveys arvoksi 250px ja korkeus #test2 - 200px:

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

Kaikki mainitut elementtien kokoja käsittelevät metodit tarjoavat myös mahdollisuuden soveltaa funktiota jokaiseen elementtiin joukossa.