jQuery-ში outerWidth და outerHeight მეთოდები

ბოლო წყვილი მეთოდებია outerWidth და outerHeight, რომელთა დახმარებითაც შესაძლებელია მიიღოთ ელემენტის სიგანე და სიმაღლე ყველა margin-ის და border-ის ჩათვლით, ან შეგიძლიათ არ გაითვალისწინოთ გარე margin-ები margin.

განვიხილოთ მაგალითი. დავუშვათ, გვაქვს პარაგრაფი:

<p id="test">ტექსტი</p>
<p id="out"></p>

CSS ასე გამოიყურება:

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

მოდით მივიღოთ პარაგრაფის #test სიგანის და სიმაღლის მნიშვნელობები, გაითვალისწინეთ padding და border, ამისთვის ამ მეთოდებს უნდა გადავცეთ false ან დავტოვოთ ფრჩხილები ცარიელი (რადგან ის უკვე დანარჩენად არის მეთოდში):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

ახლა ჩვენი მნიშვნელობები განსხვავდება დამატებით 4px-ით, რადგან border-ის სისქე თითოეულ მხარეს 2px-ია.

ახლა კი მივიღოთ პარაგრაფის #test სიგანის და სიმაღლის მნიშვნელობები, ყველა margin-ის და border-ის ჩათვლით, ამისთვის outerWidth და outerHeight მეთოდებს უნდა გადავცეთ true:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

ახლა ჩვენი მნიშვნელობები წინაებისგან განსხვავდება დამატებით 20px-ით, რადგან ჩვენი გარე margin-ები თითოეულ მხარეს 10px-ია.

დაასრულეთ წინა ამოცანების ამოხსნა - გამოიტანეთ მესამე პარაგრაფში #wrapper div-ის ქვემოთ div-ის #wrapper სიგანის და სიმაღლის მნიშვნელობები - padding-ის და border-ის ჩათვლით, მაგრამ გარე margin-ების გარეშე. მეოთხე პარაგრაფში გამოიტანეთ div-ის #wrapper სიგანის და სიმაღლის მნიშვნელობები ყველა margin-ის და border-ის ჩათვლით.

ასევე outerWidth და outerHeight მეთოდების დახმარებით ჩვენ შეგვიძლია შევცვალოთ ელემენტების სიგანის და სიმაღლის მნიშვნელობები. მაგალითად, მოდით დავაყენოთ div-ის #test1 სიგანე 250px-ის ტოლი, ხოლო #test2-ის სიმაღლე - 200px-ის:

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

ელემენტის ზომებთან მუშაობის ყველა მითითებული მეთოდი ასევე ითვალისწინებს ფუნქციის გამოყენების შესაძლებლობას თითოეულ ელემენტზე კომპლექტში.