Phương thức outerHeight() 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 outerHeight() trong jQuery

- Phương thức outerHeight() dùng để lấy tổng chiều cao 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 cao của phần margin)

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

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

$(selector).outerHeight(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 outerHeight():

4) Một số ví dụ

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

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