outerWidth un outerHeight metodi jQuery

Pēdējā metožu pāris - outerWidth un outerHeight, ar kuru palīdzību ir iespējams iegūt elementa platumu un augstumu, ņemot vērā visas atkāpes un robežas, bet var neņemt vērā ārējās atkāpes margin.

Apskatīsim piemēru. Pieņemsim, ka mums ir rindkopa:

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

CSS izskatās šādi:

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

Iegūstam rindkopas #test platuma un augstuma vērtības, ņemot vērā iekšējās atkāpes un robežas, lai to izdarītu, šīs metodēs ir jānodod false vai jāatstāj iekavas tukšas (jo tā pēc noklusējuma jau ir iestatīts metodē):

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

Tagad mūsu vērtības atšķirsies vēl par 4px, jo robežu biezums ir 2px no katras puses.

Tagad iegūstam rindkopas #test platuma un augstuma vērtības, ņemot vērā visas atkāpes un robežas, lai to izdarītu, metodēs outerWidth un outerHeight ir jānodod true:

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

Tagad mūsu vērtības atšķirsies no iepriekšējām vēl par 20px, jo ārējās atkāpes mums ir 10px no katras puses.

Papildiniet iepriekšējo uzdevumu risinājumu - izvadiet trešajā rindkopā zem div #wrapper div #wrapper platuma un augstuma vērtības - ņemot vērā iekšējās atkāpes un robežas, bet bez ārējām atkāpēm. Ceturtajā rindkopā izvadiet div #wrapper platuma un augstuma vērtības ņemot vērā visas atkāpes un robežas.

Arī ar outerWidth un outerHeight metožu palīdzību mēs varam mainīt elementu platuma un augstuma vērtības. Piemēram, iestatīsim div #test1 platumu vienādu ar 250px, bet augstumu #test2 - 200px:

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

Visas norādītās metodes darbam ar elementa izmēriem arī paredz iespēju piemērot funkciju katram elementam kopā.