Усулҳои outerWidth ва outerHeight дар jQuery

Ҷуфти охирини усулҳо - outerWidth ва outerHeight, бо ёрии онҳо имкони гирифтани паҳноӣ ва баландии унсур бо ҳисоби ҳамаи масофаҳову сарҳадҳо мавҷуд аст, ва инчунин метавон масофаҳои берунаи margin-ро ба ҳисоб нагирифт.

Биёед мисолеро дида бароем. Фарз мекунем, ки мо абзасе дорем:

<p id="test">матн</p>
<p id="out"></p>

CSS чунин менамояд:

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

Биёед қиматҳои паҳноӣ ва баландии абзаси #test-ро гирем, бо ҳисоби масофаҳои дарунӣ ва сарҳадҳо, барои ин ба ин усулҳо зарур аст, ки false гузаронем ё қавсҳоро холӣ гузорем (зеро ки он аллакай дар усул ба сурати пешфарз қарор дорад):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Паҳноӣ: ' + w + ' Баландӣ: ' + h);

Акнун қиматҳои мо аз дигареон бо 4px фарқ мекунанд, зеро ки ғафсии сарҳадҳо аз ҳар тараф 2px мебошад.

Ва акнун биёед қиматҳои паҳноӣ ва баландии абзаси #test-ро гирем, бо ҳисоби ҳамаи масофаҳову сарҳадҳо, барои ин ба усулҳои outerWidth ва outerHeight зарур аст, ки true гузаронем:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Паҳноӣ: ' + w + ' Баландӣ: ' + h);

Акнун қиматҳои мо аз қаблӣ ҳанӯз бо 20px фарқ мекунанд, зеро ки масофаҳои берунаи мо аз ҳар тараф 10px мебошанд.

Ҳалли масъалаҳои қаблиро илова кунед - ба абзаси сеюм зери диви #wrapper қиматҳои паҳноӣ ва баландии диви #wrapper-ро ворид кунед - бо ҳисоби масофаҳои дарунӣ ва сарҳадҳо, вале бе масофаҳои беруна. Ба абзаси чорум қиматҳои паҳноӣ ва баландии диви #wrapper-ро бо ҳисоби ҳамаи масофаҳову сарҳадҳо ворид кунед.

Ҳамчунин бо ёрии усулҳои outerWidth ва outerHeight мо метавонем қиматҳои паҳноӣ ва баландии унсурҳоро тағйир диҳем. Барои намуна, биёед паҳноии диви #test1-ро баробар ба 250px гузорем, ва баландии #test2-ро - 200px:

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

Ҳамаи усулҳои зикршудаи кор бо андозаҳои унсур низ имконияти татбиқи функцияро ба ҳар як унсур дар маҷмӯъ пешбинӣ мекунанд.