jQuery ຂະໜາດ

ຜ່ານ jQuery, ທ່ານສາມາດຈັດການຂະໜາດບັນດາວັດຖຸ ແລະປ່າວັດຖຸຄາວທີ່ຄວາມຍາດຫຼາຍກໍ່ຕາມ.

jQuery ພວກມັດຂະໜາດ

jQuery ຍັງມີຫຼາຍພວກມັດທີ່ສ້າງຄວາມສຳຄັນໃນການຈັດການຂະໜາດ:

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

jQuery width() ແລະ height() ພວກມັດ

ພວກມັດ width() ກຳນົດຫຼືກັບຂະໜາດຂອງບັນດາວັດຖຸ (ບໍ່ລວມຂະໜາດບັນຫາບາງຄົນ).

ພວກມັດ height() ກຳນົດຫຼືກັບຂະໜາດຂອງບັນດາວັດຖຸ (ບໍ່ລວມຂະໜາດບັນຫາບາງຄົນ).

ບົດສະຫຼຸບທີ່ລາວຄວາມຍາດກວດຄືນວ່າ <div> ຂະໜາດລະດັບພາຍໃນ/ຂະໜາດພາຍໃນ:

ຕົວຢ່າງ

$("button").click(function(){
  var txt="";
  txt += "ຂະໜາດ: " + $("#div1").width() + "</br>";
  txt += "ຂະໜາດ: " + $("#div1").height();
  $("#div1").html(txt);
);

ການທົດລອງຄັ້ງຂອງເຈົ້າ

jQuery innerWidth() ແລະ innerHeight() ພວກມັດ

ພວກມັດ innerWidth() ກັບຂະໜາດຂອງບັນດາວັດຖຸ (ບໍ່ລວມຂະໜາດບັນຫາບາງຄົນ).

ພວກມັດ innerHeight() ກັບຂະໜາດຂອງບັນດາວັດຖຸ (ບໍ່ລວມຂະໜາດບັນຫາບາງຄົນ).

ບົດສະຫຼຸບທີ່ລາວຄວາມຍາດກວດຄືນວ່າ <div> ຂະໜາດລະດັບພາຍໃນ/ຂະໜາດພາຍໃນ:

ຕົວຢ່າງ

$("button").click(function(){
  var txt="";
  txt += "ຂະໜາດລະດັບພາຍໃນ: " + $("#div1").innerWidth() + "</br>";
  txt += "ຂະໜາດລະດັບພາຍໃນ: " + $("#div1").innerHeight();
  $("#div1").html(txt);
);

ການທົດລອງຄັ້ງຂອງເຈົ້າ

jQuery outerWidth() and outerHeight() methods

outerWidth() method returns the width of the element (including padding and border).

outerHeight() method returns the height of the element (including padding and 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) method returns the width of the element (including padding, border, and margin).

outerHeight(true) method returns the height of the element (including padding, border, and 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 - More width() and height()

ຕົວຢ່າງລາວຈະການການກະກຽມຂອບຂອງແຜນ (HTML document) ແລະປ່ອງການເບິ່ງ (browser 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 Reference Manual

ສຳລັບການບົດຊະນວນຫຼັກຂອງ jQuery Dimensions, ກະລຸນາຢ້ຽມຢາມຄູ່ມື jQuery Dimensions ຂອງພວກເຮົາ.