Web Cơ Bản

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

- Phương thức width() được dùng để:

  • Trả về chiều rộng phần content của phần tử.
  • Hoặc thiết lập lại chiều rộng cho phần content của phần tử.

- Để lấy chiều rộng phần content + padding thì dùng phương thức innerWidth()

- Để 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 width() trong jQuery

- Đối với phương thức width(), chúng ta có ba trường hợp sử dụng tương ứng với ba loại cú pháp:

3.1) Lấy chiều rộng phần content của phần tử

- Dưới đây là cú pháp dùng để lấy chiều rộng phần content của phần tử:

$(selector).width();

- Lưu ý: Nếu bộ chọn tìm được nhiều phần tử trùng khớp thì phương thức width() chỉ trả về chiều rộng phần content của phần tử trùng khớp được tìm thấy đầu tiên.

3.2) Thiết lập lại chiều rộng cho phần content của phần tử

- Dưới đây là cú pháp dùng để thiết lập lại chiều rộng cho phần content của phần tử:

(cú pháp này thường được sử dụng trong trường hợp bộ chọn chỉ tìm được một phần tử trùng khớp hoặc bạn muốn tất cả các phần tử trùng khớp đều được thiết lập chung một giá trị)

$(selector).width(value);

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong cú pháp trên:

value

- Xác định chiều rộng mà bạn muốn thiết lập cho phần content của phần tử.

- Chiều rộng có thể được xác định theo đơn vị px, em, cm, pt, . . . . (mặc định là px)

3.3) Thiết lập lại chiều rộng cho phần content của phần tử (sử dụng hàm)

- Dưới đây là cú pháp dùng để thiết lập lại chiều rộng cho phần content của phần tử bằng hàm:

(cú pháp này thường được sử dụng trong trường hợp bộ chọn tìm được nhiều phần tử trùng khớp và bạn muốn mỗi phần tử trùng khớp được thiết lập một giá trị riêng)

$(selector).width(function(index,currentwidth){
    return value;
});

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong cú pháp trên:

function(index,currentwidth){
    return value;
}

- Chỉ định một hàm trả về giá trị dùng để thiết lập lại chiều rộng phần content của phần tử được chọn.

- Trong đó:

  • Tham số "index" trả về chỉ số của phần tử được chọn trong danh sách các phần tử trùng khớp được tìm thấy.
  • Tham số "currentwidth" trả về chiều rộng hiện tại của phần tử được chọn.
  • "value" là giá trị dùng để thiết lập lại chiều rộng cho phần content của phần tử được chọn.

4) Một số ví dụ

Ví dụ:

- Lấy chiều rộng phần nội dung của phần tử có lớp là info


<script>
    $(document).ready(function(){
        $("button").click(function(){
            var chieurong = $(".info").width();
            alert(chieurong);
        });
    });
</script>
Xem ví dụ
Ví dụ:

- Thiết lập chiều rộng cho phần nội dung của phần tử có lớp info là 400px


<script>
    $(document).ready(function(){
        $("button").click(function(){
            $(".info").width("400px");
        });
    });
</script>
Xem ví dụ
Ví dụ:

- Thiết lập chiều rộng cho phần nội dung của phần tử <p> (sử dụng hàm)


<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").width(function(a,b){
                if(a==0){return b + 20;}
                if(a==1){return b + 150;}
                if(a==2){return 150;}
            });
        });
    });
</script>
Xem ví dụ
Ví dụ:

- Lấy chiều rộng phần nội dung của phần tử window và document


<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#demo1").html($(window).width());
            $("#demo2").html($(document).width());
        });
    });
</script>
Xem ví dụ