ล่าสุดการพัฒนาเว็บบทเรียน
 

jQuery - ขนาด

❮ก่อนหน้า ถัดไปบท❯

กับ jQuery มันเป็นเรื่องง่ายที่จะทำงานกับขนาดขององค์ประกอบและหน้าต่างเบราว์เซอร์

วิธีการขนาด jQuery

jQuery มีวิธีการที่สำคัญหลายประการสำหรับการทำงานกับมิติ

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

jQuery ขนาด

jQuery ขนาด

jQuery width() และ height() วิธีการ

width() ชุดวิธีการหรือส่งกลับความกว้างขององค์ประกอบ (โดยไม่คิด padding, border และ margin )

height() ชุดวิธีการหรือผลตอบแทนที่สูงขององค์ประกอบ (โดยไม่คิด padding, border และ margin )

ตัวอย่างต่อไปนี้จะส่งกลับความกว้างและความสูงของระบุ <div> องค์ประกอบ:

ตัวอย่าง

$("button").click(function(){
    var txt = "";
    txt += "Width: " + $("#div1").width() + "</br>";
    txt += "Height: " + $("#div1").height();
    $("#div1").html(txt);
});
ลองตัวเอง»

jQuery innerWidth() และ innerHeight() วิธีการ

innerWidth() วิธีการส่งกลับความกว้างของสิ่งนั้น ๆ (รวม padding )

innerHeight() วิธีการส่งกลับความสูงขององค์ประกอบนี้ (รวมถึง padding )

ตัวอย่างต่อไปนี้จะส่งกลับภายในกว้าง / สูงของระบุ <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 )

ตัวอย่างต่อไปนี้จะส่งกลับด้านนอกที่มีความกว้าง / ความสูงของระบุ <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) และหน้าต่าง (วิวพอร์ตเบราว์เซอร์):

ตัวอย่าง

$("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);
});
ลองตัวเอง»

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »

jQuery CSS อ้างอิง

สำหรับภาพรวมทั้งหมดของทุกวิธีการ jQuery CSS, โปรดไปที่เรา jQuery HTML / CSS อ้างอิง


❮ก่อนหน้า ถัดไปบท❯