outerWidth ir outerHeight metodai jQuery

Paskutinė metodų pora - outerWidth ir outerHeight, kurių pagalba galima gauti elemento plotį ir aukštį įskaitant visas paraštes ir sieneles, arba galima neįskaityti išorinių paraščių margin.

Panagrinėkime pavyzdį. Tarkime, kad turime pastraipą:

<p id="test">text</p>
<p id="out"></p>

CSS atrodo taip:

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

Gaukime pastraipos #test pločio ir aukščio reikšmes, įskaitant vidines paraštes ir sieneles, tam šiuos metodus reikia perduoti false arba palikti skliaustelius tuščius (nes tai jau nustatyta pagal nutylėjimą):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

Dabar mūsų reikšmės skirsis dar 4px, kadangi sienelių storis po 2px iš kiekvienos pusės.

O dabar gaukime pastraipos #test pločio ir aukščio reikšmes, įskaitant visas paraštes ir sieneles, tam į metodus outerWidth ir outerHeight reikia perduoti true:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

Dabar mūsų reikšmės skirsis nuo ankstesnių dar 20px, kadangi išorinės paraštės yra po 10px iš kiekvienos pusės.

Papildykite ankstesnių užduočių sprendimą - išveskite į trečią pastraipą po div #wrapper div #wrapper pločio ir aukščio reikšmes - įskaitant vidines paraštes ir sieneles, bet be išorinių paraščių. Į ketvirtą pastraipą išveskite div #wrapper pločio ir aukščio reikšmes įskaitant visas paraštes ir sieneles.

Taip pat, naudodami metodus outerWidth ir outerHeight, galime pakeisti elementų pločio ir aukščio reikšmes. Pavyzdžiui, nustatykime div #test1 plotį lygų 250px, o aukštį #test2 - 200px:

$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

Visi nurodyti darbą su elemento dydžiais susiję metodai taip pat numato galimybę taikyti funkciją kiekvienam rinkinio elementui.