width-metodi
width-metodi mahdollistaa elementin
leveyden hakemisen ja muuttamisen. On tärkeää muistaa, että
saamme 'lasketun arvon' leveydestä
(computed width).
Toisin kuin
css('width')-metodissa,
se palauttaa yksiköttömän arvon (esimerkiksi 400)
ja on kätevä matemaattisissa laskelmissa.
Metodi hakee elementin sisällön leveyden riippumatta
CSS-ominaisuuden
box-sizing
määrittelystä. Välttääkseen tähän liittyviä hankaluuksia on suositeltavaa
käyttää css('width')-metodia.
Laskentavirheitä voi ilmetä myös, jos
käyttäjä muuttaa sivun kokoa tai jos
elementti tai sen vanhempi on piilotettu. Leveysarvo ei
ota huomioon marginaalien ja reunuksen arvoja.
Syntaksi
Elementin leveyden hakeminen. Joissakin tapauksissa saadut arvot voivat olla murtolukuja:
$(valitsin).width();
Muuttaaksesi elementin leveyttä - voit välittää pelkän
luvun (esimerkiksi 400), jolloin mittayksikkö
on pikseleitä, tai merkkijonon,
jossa on mittayksiköt (esimerkiksi
'10em'):
$(valitsin).width(uusi arvo);
Voimme myös soveltaa annettua funktiota jokaiseen
elementtiin valinnassa. Tässä tapauksessa funktio saa ensimmäisenä parametrina
elementin järjestysnumeron valinnassa ja toisena parametrina
- nykyisen leveysarvon kyseiselle
elementille. this-arvo funktion sisällä viittaa
nykyiseen elementtiin.
Elementin leveysarvo muuttuu arvoksi,
jonka funktio palauttaa:
$(valitsin).width(function(järjestysnumero valinnassa, nykyinen leveysarvo));
Esimerkki
Muutetaan div-elementin
leveys arvoksi 40px napsautettaessa sitä käyttämällä
width-metodia, ja myös css-metodilla
muutetaan sen taustan väri vihreäksi:
<div id="test"></div>
#test {
width: 90px;
height: 80px;
background: red;
color: white;
margin-top: 10px;
cursor: pointer;
}
$('#test').one('click', function() {
$(this).width(40).css({
cursor: 'auto',
backgroundColor: 'green'
});
});
Katso myös
-
metodi
height,
joka mahdollistaa elementin korkeuden hakemisen ja muuttamisen -
metodi
innerWidth,
joka mahdollistaa elementin leveyden hakemisen ja muuttamisen, ottaen huomioon sen sisäiset marginaalit -
metodi
outerWidth,
joka mahdollistaa elementin leveyden hakemisen ja muuttamisen, ottaen huomioon sen marginaalit ja reunan -
metodi
css,
joka mahdollistaa elementin CSS-tyylien hakemisen ja muuttamisen