outerHeight-metodi
Metodi outerHeight mahdollistaa
elementin korkeuden saamisen ja muuttamisen sisäisin marginaalein,
reunuksen ja valikoiden - ulkoisin marginaalein. On tärkeää
muistaa, että saamme 'lasketun arvon' korkeudesta
(computed height).
Virheitä laskennassa voi myös ilmetä, jos
käyttäjä muuttaa sivun kokoa, sekä jos
elementti tai sen vanhempi on piilotettu.
Syntaksi
Näin voimme saada elementin korkeuden. Tämä metodi voi
ottaa valinnaisen parametrin muodossa true
tai false (false on oletusarvoisesti),
riippuen siitä - otetaanko ulkoiset
marginaalit huomioon vai ei. Joissakin tapauksissa
sadut arvot voivat olla murtolukuja:
$(valitsin).outerWidth([mukaan_lukien_margin]);
Muuttaaksesi elementin leveyttä - voit välittää vain
luvun (esimerkiksi 400), jolloin mittayksikkö
on pikseliä, tai merkkijonon,
jossa on mittayksikkö (esimerkiksi
'10em'):
$(valitsin).outerHeight(uusi arvo, [mukaan_lukien_margin]);
Voimme myös soveltaa annettua funktiota jokaiseen
elementtiin joukossa. Tässä tapauksessa funktion ensimmäinen parametri saa
elementin numeron joukossa, ja toinen parametri
- nykyisen annetun korkeusarvon kyseiselle
elementille. this funktion sisällä
viittaa nykyiseen elementtiin.
Elementin leveysarvo muuttuu arvoksi,
jonka funktio palauttaa:
$(valitsin).outerHeight(function(numero joukossa, nykyinen korkeusarvo));
Esimerkki
Vertailun vuoksi tulostetaan tietoa
kappaleen #test korkeudesta, joka on saatu metodeilla
height,
innerHeight ja
outerHeight:
<p id="test">teksti</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
let h1 = $('#test').height();
let h2 = $('#test').innerHeight();
let h3 = $('#test').outerHeight();
let h4 = $('#test').outerHeight(true);
$('#out1').text(h1);
$('#out2').text(h2);
$('#out3').text(h3);
$('#out4').text(h4);
Katso myös
-
metodi
height,
joka mahdollistaa elementin korkeuden saamisen ja muuttamisen -
metodi
innerHeight,
joka mahdollistaa elementin korkeuden saamisen ja muuttamisen, ottaen huomioon sen sisäiset marginaalit