Phương thức innerWidth() trong jQuery
1) Nhắc lại "các thành phần của một phần tử"
- Thông thường, cấu trúc của một phần tử HTML sẽ bao gồm bốn thành phần:
- margin (phần lề nằm giữa đường viền của phần tử với các phần tử xung quanh)
- border (đường viền của phần tử)
- padding (vùng đệm nằm giữa đường viền của phần tử với nội dung của phần tử)
- content (nội dung của phần tử)
- Dưới đây là hình ảnh minh họa về cấu trúc của một phần tử HTML.
margin
border
padding
content
2) Phương thức innerWidth() trong jQuery
- Phương thức innerWidth() dùng để lấy tổng chiều rộng phần content + padding của phần tử.
- Gợi ý:
- Để lấy chiều rộng phần content thì dùng phương thức width()
- Để lấy chiều rộng phần content + padding + border thì dùng phương thức outerWidth()
3) Cách sử dụng phương thức innerWidth() trong jQuery
- Để sử dụng phương thức innerWidth(), ta dùng cú pháp như sau:
$(selector).innerWidth();
4) Một số ví dụ
Ví dụ:
- Lấy tổng chiều rộng phần content + padding của phần tử có lớp là info
<script>
$(document).ready(function(){
$("button").click(function(){
var chieurong = $(".info").innerWidth();
alert(chieurong);
});
});
</script>
Xem ví dụ