jQuery-ի outerWidth և outerHeight մեթոդները

Վերջին զույգ մեթոդներն են 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);

Տարրի չափսերի հետ աշխատելու բոլոր նշված մեթոդները նաև նախատեսում են ֆունկցիա կիրառելու հնարավորություն հավաքածուի յուրաքանչյուր տարրի նկատմամբ։