Metody outerWidth a outerHeight v jQuery

Poslední pár metod - outerWidth a outerHeight, pomocí kterých je možné získat šířku a výšku prvku včetně všech odsazení a okrajů, anebo není nutné zohledňovat vnější okraje margin.

Podívejme se na příklad. Předpokládejme, že máme odstavec:

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

CSS vypadá takto:

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

Získejme hodnoty šířky a výšky odstavce #test, včetně vnitřních odsazení a okrajů, k tomu je nutné předat do těchto metod false nebo nechat závorky prázdné (protože to již je v metodě nastaveno jako výchozí):

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

Nyní se naše hodnoty budou lišit ještě o 4px, protože tloušťka okrajů je po 2px na každé straně.

A nyní získejme hodnoty šířky a výšky odstavce #test, včetně všech odsazení a okrajů, k tomu je nutné předat do metod outerWidth a outerHeight hodnotu true:

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

Nyní se naše hodnoty budou lišit od předchozích ještě o 20px, protože vnější okraje jsou po 10px na každé straně.

Doplňte řešení předchozích úloh - vypište do třetího odstavce pod divem #wrapper hodnoty šířky a výšky divu #wrapper - včetně vnitřních odsazení a okrajů, ale bez vnějších okrajů. Do čtvrtého odstavce vypište hodnoty šířky a výšky divu #wrapper včetně všech odsazení a okrajů.

Také pomocí metod outerWidth a outerHeight můžeme změnit hodnoty šířky a výšky prvků. Například nastavme šířku divu #test1 na 250px a výšku #test2 na 200px:

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

Všechny uvedené metody pro práci s rozměry prvku také předpokládají možnost aplikace funkce na každý prvek v sadě.