innerWidth-metodi
innerWidth-metodi mahdollistaa elementin
leveyden hakemisen ja muuttamisen sen sisäisin
marginaalein. On tärkeää muistaa, että
saamme 'lasketun arvon' leveydestä
(computed width).
Laskentavirheitä voi myös ilmetä, jos
käyttäjä muuttaa sivun kokoa, tai jos
elementti tai sen vanhempi on piilotettu. Leveysarvo ei
ota huomioon elementin reunuksen paksuutta.
Syntaksi
Hae elementin leveys. Joissakin tapauksissa saadut arvot voivat olla murtolukuja:
$(valitsin).innerWidth();
Muuttaaksesi elementin leveyttä - voit välittää vain
luvun (esimerkiksi 400), jolloin mittayksikkö
on pikseliä, tai merkkijonon,
jossa on mittayksikkö (esimerkiksi
'10em'):
$(valitsin).innerWidth(uusi arvo);
Voimme myös soveltaa annettua funktiota jokaiseen
elementtiin valinnassa. Tässä tapauksessa funktio saa ensimmäisenä parametrina
elementin indeksin valinnassa, ja toisena parametrina
- nykyisen leveysarvon kyseiselle
elementille. this-arvo funktion sisällä viittaa
nykyiseen elementtiin.
Elementin leveysarvo muuttuu arvoksi,
joka funktio palauttaa:
$(valitsin).innerWidth(function(indeksi valinnassa, nykyinen leveysarvo));
Esimerkki
Vertaillaksemme tulostetaan tietoa
kappaleen #test leveydestä, joka on haettu menetelmillä
width
ja innerWidth:
<p id="test">teksti</p>
<p id="out1"></p>
<p id="out2"></p>
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
let w1 = $('#test').width();
let w2 = $('#test').innerWidth();
$('#out1').text(w1);
$('#out2').text(w2);
Näemme eron 10px, mikä on summamme
vasemman ja oikean sisämarginaalien.
Katso myös
-
metodi
width,
joka mahdollistaa elementin leveyden hakemisen ja muuttamisen -
metodi
outerWidth,
joka mahdollistaa elementin leveyden hakemisen ja muuttamisen, ottaen huomioon sen marginaalit ja reunuksen