Phương thức outerWidth

Phương thức outerWidth cho phép lấy và thay đổi chiều rộng của phần tử có tính đến phần đệm bên trong, đường viền và tùy chọn - phần lề bên ngoài của phần tử. Điều quan trọng cần nhớ là chúng ta sẽ nhận được 'giá trị được tính toán' của chiều rộng (computed width). Lỗi trong tính toán cũng có thể xảy ra nếu người dùng thay đổi kích thước trang, và nếu phần tử hoặc phần tử cha của nó bị ẩn.

Cú pháp

Đây là cách chúng ta có thể lấy chiều rộng của phần tử. Phương thức này có thể chấp nhận một tham số tùy chọn dưới dạng true hoặc false (false là mặc định), tùy thuộc vào việc có tính đến phần lề bên ngoài hay không. Trong một số trường hợp giá trị nhận được có thể là số thập phân:

$(selector).outerWidth([including_margin]);

Để thay đổi chiều rộng của phần tử - có thể truyền một số đơn giản (ví dụ 400), khi đó đơn vị đo sẽ là pixel, hoặc một chuỗi, có chỉ định đơn vị đo (ví dụ '10em'):

$(selector).outerWidth(new value, [including_margin]);

Chúng ta cũng có thể áp dụng một hàm đã cho cho mỗi phần tử trong tập hợp. Trong trường hợp này tham số đầu tiên của hàm sẽ nhận được số thứ tự của phần tử trong tập hợp, và tham số thứ hai - giá trị chiều rộng hiện tại được thiết lập cho phần tử cụ thể đó. this bên trong hàm sẽ trỏ đến phần tử hiện tại. Giá trị chiều rộng của phần tử sẽ thay đổi thành giá trị mà hàm trả về:

$(selector).outerWidth(function(index in set, current width value));

Ví dụ

Hãy so sánh và hiển thị thông tin về chiều rộng của đoạn văn #test, được lấy bằng các phương thức width, innerWidth và outerWidth:

<p id="test">văn bản</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

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

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);

$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);

Xem thêm

phương thức width,
cho phép lấy và thay đổi chiều rộng của phần tử
phương thức innerWidth,
cho phép lấy và thay đổi chiều rộng của phần tử, có tính đến phần đệm bên trong của nó