Phương thức jQuery width ()
❮ Phương thức HTML / CSS jQuery
Thí dụ
Trả về chiều rộng của phần tử <div>:
$("button").click(function(){
alert($("div").width());
});
Định nghĩa và Cách sử dụng
Phương thức width () đặt hoặc trả về chiều rộng của các phần tử đã chọn.
Khi phương thức này được sử dụng để trả về chiều rộng, nó sẽ trả về chiều rộng của phần tử được so khớp ĐẦU TIÊN.
Khi phương thức này được sử dụng để đặt chiều rộng, nó sẽ đặt chiều rộng của TẤT CẢ các phần tử được so khớp.
Như hình ảnh minh họa bên dưới, phương pháp này không bao gồm phần đệm, đường viền hoặc lề.
Các phương pháp liên quan:
- height () - Đặt hoặc trả về chiều cao của một phần tử
- innerWidth () - Trả về chiều rộng của một phần tử (bao gồm padding)
- innerHeight () - Trả về chiều cao của một phần tử (bao gồm phần đệm)
- externalWidth () - Trả về chiều rộng của một phần tử (bao gồm phần đệm và đường viền).
- ngoàiHeight () - Trả về chiều cao của một phần tử (bao gồm phần đệm và đường viền).
Cú pháp
Trả lại chiều rộng:
$(selector).width()
Đặt chiều rộng:
$(selector).width(value)
Đặt chiều rộng bằng cách sử dụng một hàm:
$(selector).width(function(index,currentwidth))
| Parameter | Description |
|---|---|
| value | Required for setting width. Specifies the width in px, em, pt, etc. Default unit is px |
| function(index,currentwidth) | Optional. Specifies a function that returns the new width of selected elements
|
Hãy tự mình thử - Ví dụ
Cách đặt chiều rộng của một phần tử bằng cách sử dụng các đơn vị khác nhau.
Cách sử dụng một hàm để giảm chiều rộng của một phần tử.
Cách trả về chiều rộng hiện tại của phần tử tài liệu và cửa sổ.
Cách sử dụng width (), height (), innerHeight (), innerWidth (), externalWidth () và externalHeight ().
Cách thay đổi màu nền của trang trên màn hình nhỏ hơn.
❮ Phương thức HTML / CSS jQuery