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