jQuery-də outerWidth və outerHeight metodları

Sonuncu metod cütlüyü - outerWidth və outerHeight, onların köməyi ilə elementin eni və hündürlüyünü bütün boşluqlar və sərhədlər nəzərə alınmaqla almaq mümkündür, və ya xarici boşluqları margin nəzərə almamaq olar.

Bir nümunəyə baxaq. Tutaq ki, bizim bir abzasımız var:

<p id="test">mətn</p>
<p id="out"></p>

CSS belə görünür:

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

Gəlin #test abzasının en və hündürlük dəyərlərini daxili boşluqlar və sərhədlər nəzərə alınmaqla əldə edək, bunun üçün bu metodlara false ötürmək lazımdır ya da mötərizələri boş buraxın (çünki metodda standart olaraq bu dəyər qeyd olunub):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('En: ' + w + ' Hündürlük: ' + h);

İndi bizim dəyərlər əlavə 4px ilə fərqlənəcək, çünki hər tərəfdən sərhədlərin qalınlığı 2px-dir.

İndi isə gəlin #test abzasının en və hündürlük dəyərlərini bütün boşluqlar və sərhədlər nəzərə alınmaqla əldə edək, bunun üçün outerWidth və outerHeight metodlarına true ötürmək lazımdır:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('En: ' + w + ' Hündürlük: ' + h);

İndi bizim dəyərlər əvvəlkilərdən fərqlənəcək əlavə 20px ilə, çünki bizim xarici boşluqlar hər tərəfdən 10px-dir.

Əvvəlki məsələlərin həllini tamamlayın - #wrapper div-inin altındakı üçüncü abzasa #wrapper div-inin en və hündürlük dəyərlərini çıxarın - daxili boşluqlar və sərhədlər nəzərə alınmaqla, lakin xarici boşluqlar olmadan. Dördüncü abzasa #wrapper div-inin en və hündürlük dəyərlərini bütün boşluqlar və sərhədlər nəzərə alınmaqla çıxarın.

Həmçinin outerWidth və outerHeight metodlarının köməyi ilə biz elementlərin en və hündürlük dəyərlərini dəyişə bilərik. Məsələn, gəlin #test1 div-inin enini 250px, hündürlüyünü isə #test2 - 200px təyin edək:

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

Elementin ölçüləri ilə işləyən bütün göstərilən metodlar həmçinin çoxluqdakı hər bir elementə funksiyanın tətbiq edilməsi imkanını nəzərdə tutur.