Phương thức outerWidth() 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.

2) Phương thức outerWidth() trong jQuery

- Phương thức outerWidth() dùng để lấy tổng chiều rộng của ba phần content, padding và border của phần tử (ngoài ra, ta cũng có thể lấy thêm cả chiều rộng của phần margin)

3) Cách sử dụng phương thức outerWidth() trong jQuery

- Để sử dụng phương thức outerWidth(), ta dùng cú pháp như sau:

$(selector).outerWidth(includeMargin);

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong phương thức outerWidth():

4) Một số ví dụ

<script>
    $(document).ready(function(){
        $("button").click(function(){
            var chieurong = $(".info").outerWidth();
            alert(chieurong);
        });
    });
</script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            var chieurong = $(".info").outerWidth(true);
            alert(chieurong);
        });
    });
</script>