jQuery-de outerWidth we outerHeight metodlary

Iň soňky metodlar jübüti - outerWidth we outerHeight, olaryň kömegi bilen elementiň ini we beýikligini ähli goşmaça boşluklar we serhetler bilen almak mümkin, ýa-da daşky boşluklary margin hasaba almazlyk mümkin.

Mysala serediň. Bizde bir abzas bar bolsun:

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

CSS şeýle görünýär:

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid gök;
}

Geliň, abzasyň #test ini we beýiklik bahalaryny alyň, iki tarapdaky goşmaça boşluklary we serhetleri hasaba almak üçin, bu metodlara false geçirmeli ýa-da möhletleri boş goýmaly (sebäbi metodda öňünden bu baha belleşik üýtgeýjisi ýaly):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Ini: ' + w + ' Beýikligi: ' + h);

Indi bahalarymyz ýene 4px üýtgerer, sebäbi her bir tarapdaky serhetleriň galyňlygy 2px.

Indi bolsa, abzasyň #test ini we beýiklik bahalaryny alyň, ähli boşluklary we serhetleri hasaba almak üçin, outerWidth we outerHeight metodlaryna true geçirmeli:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Ini: ' + w + ' Beýikligi: ' + h);

Indi bahalarymyz öňkülerden ýene 20px üýtgerer, sebäbi daşky boşluklarymyz her bir tarapda 10px.

Öňki meseleleriň çözgüdini dolduryň - üçünji abzasa, #wrapper dіwiniň aşagynda, dіwiň #wrapper ini we beýiklik bahalaryny çykaryň - iki tarapdaky goşmaça boşluklar we serhetler bilen, ýöne daşky boşluklarsyz. Dördünji abzasa dіwiň #wrapper ini we beýiklik bahalaryny ähli boşluklar we serhetler bilen çykaryň.

Şeýle hem outerWidth we outerHeight metodlarynyň kömegi bilen biz elementleriň ini we beýiklik bahalaryny üýtgedip bileris. Mysal üçin, dіwiň #test1 ini 250px deň edeliň, dіwiň #test2 beýikligini bolsa 200px:

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

Görkezilen ähli element ölçegleri bilen işleýän metodlar şeýle hem toplamdaky her bir element üçin funksiýany ulanmak mümkinçiligini öz içine alýar.