Tự học JQuery - HTML - Bài 7 - JQuery Kích thước

Xem Mục lục lập trình JQuery

Với jQuery thật dễ dàng để làm việc với kích thước của các phần tử và cửa sổ trình duyệt.

Các phương thức jQuery Kích Thước

jQuery có nhiều phương thức quan trọng để ta làm việc với các kích thước:

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()
  

---

jQuery Kích Thước

---

Phương thức jQuery width() và height()

Phương thức width() thiết lập hoặc trả về chiều rộng của 01 phần tử (ngoại trừ padding, border và margin).

Phương thức height() thiết lập hoặc trả về chiều cao của 01 phần tử (ngoại trừ padding, border và margin).

Ví dụ sau trả về chiều rộng và chiều cao của 01 thẻ <div>

$("button").click(function(){
    var txt = "";
    txt += "Width: " + $("#div1").width() + "</br>";
    txt += "Height: " + $("#div1").height();
    $("#div1").html(txt);
});

Phương thức jQuery innerWidth() và innerHeight()

Phương thức innerWidth() trả về chiều rộng của 01 phần tử (bao gồm padding).

Phương thức innerHeight() trả về chiều cao của 01 phần tử (bao gồm padding).

Ví dụ sau trả về inner-width/height của 01 thẻ <div> xác định:

$("button").click(function(){
    var txt = "";
    txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
    txt += "Inner height: " + $("#div1").innerHeight();
    $("#div1").html(txt);
});

Phương thức jQuery outerWidth() và outerHeight()

Phương thức outerWidth() trả về chiều rộng của 01 phần tử (bao gồm padding và border).

Phương thức outerHeight() trả về chiều cao của 01 phần tử (bao gồm padding và border).

Ví dụ sau trả về outer-width/height của 01 thẻ <div> xác định:

$("button").click(function(){
    var txt = "";
    txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
    txt += "Outer height: " + $("#div1").outerHeight();
    $("#div1").html(txt);
});

Phương thức outerWidth(true) trả về bề rộng của 01 phần tử (bao gồm padding, border, và margin).

Phương thức outerHeight(true) trả về chiều cao của 01 phần tử (bao gồm padding, border, và margin).

Ví dụ:

$("button").click(function(){
    var txt = "";
    txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
    txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
    $("#div1").html(txt);
});

Phương thức jQuery width() và height() mở rộng

Ví dụ sau trả về chiều rộng và chiều cao của trang HTML và cửa sổ trình duyệt (khung view)

$("button").click(function(){
    var txt = "";
    txt += "Document width/height: " + $(document).width();
    txt += "x" + $(document).height() + "\n";
    txt += "Window width/height: " + $(window).width();
    txt += "x" + $(window).height();
    alert(txt);
});

Ví dụ sau thiết lập bề rộng và chiều cao của 01 thẻ <div> xác định:

$("button").click(function(){
    $("#div1").width(500).height(500);
});

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Xem Mục lục lập trình JQuery

By #drM