jQuery Dimension

ด้วย jQuery ง่ายที่จะจัดการขนาดของ element และ window ของเบราซเซอร์

jQuery Method ของขนาด

jQuery มี method หลายอย่างที่สำคัญสำหรับการจัดการขนาด

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

jQuery width() และ height()

ของ width() ตั้งค่าหรือคืนค่าความกว้างของ element (ไม่รวม padding, border หรือ margin)

ของ height() ตั้งค่าหรือคืนค่าความสูงของ element (ไม่รวม padding, border หรือ margin)

ตัวอย่างดังนี้คืนค่า width และ height ของ element <div> ที่ระบุ

ตัวอย่าง

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

ลองด้วยตัวเอง

jQuery มี method innerWidth() และ innerHeight()

ของ innerWidth() คืนความกว้างของ element (รวม padding)

ของ innerHeight() คืนความสูงของ element (รวม padding)

ตัวอย่างดังนี้คืนค่า inner-width/height ของ element <div> ที่ระบุ

ตัวอย่าง

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

ลองด้วยตัวเอง

jQuery หน้า outerWidth() และ outerHeight()

ของหน้า outerWidth() กลับค่าความกว้างขององค์ประกอบ (รวมกับ padding และ border)

ของหน้า outerHeight() กลับค่าความสูงขององค์ประกอบ (รวมกับ padding และ border)

ตัวอย่างด้านล่างนี้คืนค่า outer-width/height ของ <div> ที่กำหนด

ตัวอย่าง

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

ลองด้วยตัวเอง

ของหน้า outerWidth(true) กลับค่าความกว้างขององค์ประกอบ (รวมกับ padding, border และ margin)

ของหน้า outerHeight(true) กลับค่าความสูงขององค์ประกอบ (รวมกับ padding, border และ margin)

ตัวอย่าง

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

ลองด้วยตัวเอง

jQuery - มากกว่า width() และ height()

ตัวอย่างด้านล่างนี้คืนค่าความกว้างและความสูงของเอกสาร (HTML โดเมน) และหน้าต่าง (viewport) ของเว็บเพจ

ตัวอย่าง

$("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);
});

ลองด้วยตัวเอง

ตัวอย่างด้านล่างนี้ตั้งค่าความกว้างและความสูงของ <div> อันที่กำหนด

ตัวอย่าง

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

ลองด้วยตัวเอง

คู่มือ jQuery CSS

หากต้องการความเข้าใจครบถ้วนเกี่ยวกับ jQuery Dimensions โปรดเข้าชมคู่มือ jQuery ขนาดของเรา