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ą:

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

CSS atrodo taip:

cssp {
  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ą):

javascriptlet 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:

javascriptlet 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.

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:

javascript$('#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.