36 of 119 menu

outerWidth-metodi

outerWidth-metodi mahdollistaa elementin leveyden hakemisen ja muuttamisen sisäisin välistyksineen, reunuksen ja valinnaisesti ulkoisin välistyksineen. 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 parent-elementti on piilotettu.

Syntaksi

Näin voimme hakea elementin leveyden. Tämä metodi voi ottaa valinnaisen parametrin muodossa true tai false (false on oletusarvo), riippuen siitä - otetaanko ulkoiset välistykset huomioon vai ei. Joissakin tapauksissa sadatut arvot voivat olla murtolukuja:

$(selector).outerWidth([include_margin]);

Muuttaaksesi elementin leveyttä - voit välittää yksinkertaisesti luvun (esimerkiksi 400), jolloin mittayksikkö on pikseleitä, tai merkkijonon, jossa on määritelty mittayksikkö (esimerkiksi '10em'):

$(selector).outerWidth(new value, [include_margin]);

Voimme myös soveltaa annettua funktiota jokaiseen elementtiin joukossa. Tällöin funktio saa ensimmäisenä parametrina elementin indeksin joukossa, ja toisena parametrina - nykyisen leveysarvon kyseiselle elementille. this funktion sisällä viittaa nykyiseen elementtiin. Elementin leveysarvo muuttuu arvoksi, jonka funktio palauttaa:

$(selector).outerWidth(function(index, currentWidth));

Esimerkki

Laitetaan vertailua varten tulostus kappaleen #test leveydestä, joka on haettu metodeilla width, innerWidth ja outerWidth:

<p id="test">text</p> <p id="out1"></p> <p id="out2"></p> <p id="out3"></p> <p id="out4"></p> p { margin: 10px; padding: 5px; border: 2px solid blue; } let w1 = $('#test').width(); let w2 = $('#test').innerWidth(); let w3 = $('#test').outerWidth(false); let w4 = $('#test').outerWidth(true); $('#out1').text(w1); $('#out2').text(w2); $('#out3').text(w3); $('#out4').text(w4);

Katso myös

  • metodi width,
    joka mahdollistaa elementin leveyden hakemisen ja muuttamisen
  • metodi innerWidth,
    joka mahdollistaa elementin leveyden hakemisen ja muuttamisen, ottaen huomioon sen sisäiset välistykset
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ää