Web Cơ Bản

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ụ