height-metodi
Metodi height mahdollistaa elementin
korkeuden saamisen ja muuttamisen. On tärkeää muistaa,
että saamme 'lasketun arvon'
korkeudesta (computed height).
Toisin kuin metodi
css('height'),
se palauttaa yksiköttömän arvon (esimerkiksi 400)
ja on kätevä matemaattisissa laskelmissa.
Metodi saa elementin sisällön korkeuden riippumatta
CSS-ominaisuuden
box-sizing
määrittelystä.
Välttääksesi tarpeettomia laskelmia, on suositeltavaa
käyttää css('height').
Laskentavirheitä voi myös ilmetä, jos
käyttäjä muuttaa sivun kokoa, tai jos
elementti tai sen vanhempi on piilotettu. Korkeusarvo
ei ota huomioon marginaalien ja reunuksen arvoja.
Syntaksi
Saada elementin korkeus. Joissakin tapauksissa sadat arvot voivat olla murtolukuja:
$(valitsin).height();
Muuttaaksesi elementin korkeutta - voit välittää pelkän
luvun (esimerkiksi 400), jolloin mittayksikkö
on pikseliä, tai merkkijonon,
jossa on mittayksikkö (esimerkiksi
'10em'):
$(valitsin).height(uusi arvo);
Voimme myös soveltaa annettua funktiota jokaiseen
elementtiin joukossa. Tällöin 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).height(function(järjestysnumero joukossa, nykyinen korkeusarvo));
Esimerkki
Muutetaan #test:n
korkeus arvoksi 30px klikkaamalla sitä,
käyttämällä metodia
height, ja myös css:n avulla
muutetaan sen tausta vihreäksi:
<div id="test"></div>
#test {
width: 50px;
height: 90px;
background: red;
color: white;
margin-top: 10px;
cursor: pointer;
}
$('#test').one('click', function() {
$(this).height(30).css({
cursor: 'auto',
backgroundColor: 'green'
});
});
Katso myös
-
metodi
width,
joka mahdollistaa elementin leveyden saamisen ja muuttamisen -
metodi
innerHeight,
joka mahdollistaa elementin korkeuden saamisen ja muuttamisen, ottaen huomioon sen sisäiset marginaalit -
metodi
outerHeight,
joka mahdollistaa elementin korkeuden saamisen ja muuttamisen, ottaen huomioon sen marginaalit ja reunan -
metodi
css,
joka mahdollistaa elementin CSS-tyylien saamisen ja muuttamisen