innerHeight-metodi
Metodi innerHeight mahdollistaa elementin
korkeuden hakemisen ja muuttamisen sen sisennysten
huomioiden. On tärkeää muistaa, että saamme
'lasketun arvon' korkeudesta
(computed height).
Laskentavirheitä voi myös esiintyä, jos
käyttäjä muuttaa sivun kokoa, tai jos
elementti tai sen vanhempi on piilotettu. Korkeusarvo ei
huomioi elementin reunan paksuutta.
Syntaksi
Hae elementin korkeus. Joissakin tapauksissa saadut arvot voivat olla murtolukuja:
$(valitsin).innerHeight();
Muuttaaksesi elementin korkeuden - voit välittää pelkän
luvun (esimerkiksi 400), jolloin mittayksikkö
on pikseliä, tai merkkijonon,
jossa on mittayksikkö (esimerkiksi
'10em'):
$(valitsin).innerHeight(uusi arvo);
Voimme myös soveltaa annettua funktiota jokaiseen
elementtiin joukossa. Tässä tapauksessa funktio saa ensimmäisenä parametrina
elementin järjestysnumeron joukossa, ja toisena parametrina
- nykyisen korkeusarvon kyseiselle
elementille. this funktion sisällä viittaa
nykyiseen elementtiin.
Elementin korkeusarvo muuttuu arvoksi,
jonka funktio palauttaa:
$(valitsin).innerHeight(function(järjestysnumero joukossa, nykyinen korkeusarvo));
Esimerkki
Tuodaan vertailua varten tietoa
kappaleen #test korkeudesta, joka on haettu metodeilla
height
ja innerHeight:
<p id="test">teksti</p>
<p id="out1"></p>
<p id="out2"></p>
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
let h1 = $('#test').height();
let h2 = $('#test').innerHeight();
$('#out1').text(h1);
$('#out2').text(h2);
Näemme eron 10px, mikä on ylä- ja alasisennyksemme summa.
Katso myös
-
metodi
height,
joka mahdollistaa elementin korkeuden hakemisen ja muuttamisen -
metodi
outerHeight,
joka mahdollistaa elementin korkeuden hakemisen ja muuttamisen, huomioiden sen marginaalit ja reunan