Meetod outerWidth

Meetod outerWidth võimaldab saada ja muuta elemendi laiust, võttes arvesse sisemisi polsterdusi, piiri ja valikuliselt - välimisi polsterdusi. Tähtis on meeles pidada, et me saame 'arvutatud väärtuse' laiusest (computed width). Arvutusvead võivad tekkida ka siis, kui kasutaja muudab lehe suurust, samuti kui element või selle vanem on peidetud.

Süntaks

Nii saame me elemendi laiuse. See meetod võib võtta valikulise parameetri kujul true või false (false on vaikimisi), sõltuvalt sellest - kas arvestatakse välimisi polsterdusi või mitte. Mõnel juhul võivad saadud väärtused olla murdarvulised:

$(selektor).outerWidth([kaasaarvatud_margin]);

Elemendi laiuse muutmiseks - saab edastada lihtsalt numbri (näiteks 400), siis on mõõtühikud pikslid, või stringi, märkimise mõõtühikutega (näiteks '10em'):

$(selektor).outerWidth(uus väärtus, [kaasaarvatud_margin]);

Samuti saame me rakendada määratud funktsiooni igale elemendile kogumis. Sel juhul saab funktsioon esimese parameetrina elemendi numbri kogumis, ja teise parameetrina - praeguse laiuse väärtuse konkreetse elemendi jaoks. this funktsiooni sees viitab praegusele elemendile. Elemendi laiuse väärtus muutub selleks, mille funktsioon tagastab:

$(selektor).outerWidth(function(number kogumis, praegune laiuse väärtus));

Näide

Võrdluseks kuvame lõigu #test laiuse kohta käiva teabe, mis on saadud meetoditega 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);

Vaata ka

meetod width,
mis võimaldab saada ja muuta elemendi laiust
meetod innerWidth,
mis võimaldab saada ja muuta elemendi laiust, arvestades selle sisemisi polsterdusi