Az innerWidth metódus

A innerWidth metódus lehetővé teszi az elem szélességének lekérését és módosítását a belső margóival együtt. Fontos megjegyezni, hogy a 'számított értéket' kapjuk meg a szélességből (computed width). Számítási hibák akkor is előfordulhatnak, ha a felhasználó megváltoztatja az oldal méretét, vagy ha az elem vagy annak szülője rejtett. A szélesség értéke nem veszi figyelembe az elem keretének vastagságát.

Szintaxis

Az elem szélességének lekérése. Egyes esetekben a kapott értékek tört számok lehetnek:

javascript$(selector).innerWidth();

Az elem szélességének módosításához - átadhatunk egyszerűen egy számot (például 400), ekkor a mértékegység pixel lesz, vagy egy karakterláncot, a mértékegység megadásával (például '10em'):

javascript$(selector).innerWidth(új érték);

Egy adott függvényt alkalmazhatunk minden egyes elemre a halmazban. Ekkor az első paraméterként a függvény megkapja az elem sorszámát a halmazban, a második paraméterként pedig az adott elem aktuális szélességértékét. A this értéke a függvényen belül az aktuális elemre fog mutatni. Az elem szélességének értéke azon értékre fog változni, amit a függvény visszaad:

javascript$(selector).innerWidth(function(sorszám a halmazban, aktuális szélességérték));

Példa

Hasonlítás képpen írassuk ki a #test bekezdés szélességéről szóló információt, amelyet a width és a innerWidth metódusokkal kaptunk:

html<p id="test">szöveg</p>
<p id="out1"></p>
<p id="out2"></p>

cssp {
  margin: 10px;
  padding: 5px;
  border: 2px solid blue;
}

javascriptlet w1 = $('#test').width();
let w2 = $('#test').innerWidth();

$('#out1').text(w1);
$('#out2').text(w2);

10px különbséget fogunk látni, ami a bal és jobb oldali belső margóink összege.

Lásd még