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

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

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

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

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

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

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

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

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

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

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

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

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

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

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