Phương thức innerWidth

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ó. Đ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à cũng nếu phần tử hoặc phần tử cha của nó bị ẩn. Giá trị chiều rộng không tính đến độ dày đường viền của phần tử.

Cú pháp

Lấy chiều rộng của phần tử. Trong một số trường hợp giá trị nhận được có thể là số thập phân:

$(selector).innerWidth();

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

$(selector).innerWidth(giá trị mới);

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. Khi đó tham số đầu tiên 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ị hiện tại của chiều rộng đã đặt cho phần tử cụ thể đó. Giá trị this bên trong hàm sẽ chỉ đế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).innerWidth(function(số thứ tự trong tập hợp, giá trị chiều rộng hiện tại));

Ví dụ

Hãy so sánh 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 và innerWidth:

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

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

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();

$('#out1').text(w1);
$('#out2').text(w2);

Chúng ta sẽ thấy sự khác biệt là 10px, đây là tổng phần đệm trái và phải bên trong của chúng ta.

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 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 và đường viền của nó