Các phương thức outerWidth và outerHeight trong jQuery

Cặp phương thức cuối cùng là outerWidth và outerHeight, với sự trợ giúp của chúng có thể lấy được chiều rộng và chiều cao của phần tử bao gồm tất cả các khoảng đệm và đường viền, và cũng có thể không tính đến các khoảng cách ngoài margin.

Hãy xem xét một ví dụ. Giả sử chúng ta có một đoạn văn:

<p id="test">text</p>
<p id="out"></p>

CSS trông như thế này:

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

Hãy lấy các giá trị chiều rộng và chiều cao của đoạn văn #test, bao gồm cả khoảng đệm bên trong và đường viền, để làm điều này, cần truyền false vào các phương thức này hoặc để trống dấu ngoặc đơn (vì giá trị mặc định trong phương thức đã là false):

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

Bây giờ các giá trị của chúng ta sẽ khác biệt thêm 4px, vì độ dày đường viền là 2px ở mỗi bên.

Và bây giờ hãy lấy các giá trị chiều rộng và chiều cao của đoạn văn #test, bao gồm tất cả các khoảng cách và đường viền, để làm điều này, cần truyền true vào các phương thức outerWidth và outerHeight:

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

Bây giờ các giá trị của chúng ta sẽ khác biệt so với các giá trị trước đó thêm 20px, vì khoảng cách ngoài của chúng ta là 10px ở mỗi bên.

Hãy bổ sung giải pháp cho các bài tập trước - hiển thị trong đoạn văn thứ ba bên dưới div #wrapper các giá trị chiều rộng và chiều cao của div #wrapper - bao gồm khoảng đệm bên trong và đường viền, nhưng không có khoảng cách ngoài. Trong đoạn văn thứ tư, hãy hiển thị các giá trị chiều rộng và chiều cao của div #wrapper bao gồm tất cả các khoảng cách và đường viền.

Ngoài ra, với sự trợ giúp của các phương thức outerWidth và outerHeight, chúng ta có thể thay đổi các giá trị chiều rộng và chiều cao của các phần tử. Ví dụ, hãy đặt chiều rộng của div #test1 bằng 250px, và chiều cao của #test2 bằng 200px:

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

Tất cả các phương thức làm việc với kích thước phần tử được chỉ định cũng cung cấp khả năng áp dụng một hàm cho mỗi phần tử trong tập hợp.