32 of 119 menu

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
Suomi
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Käytämme evästeitä verkkosivuston toiminnalle, analytiikalle ja personoinnille. Tietojen käsittely tapahtuu Tietosuojakäytännön mukaisesti.
hyväksy kaikki mukauta hylkää