ตัวอย่าง
กลับความกว้างของที่ <div> องค์ประกอบ:
$("button").click(function(){
alert($("div").width());
});
ลองตัวเอง» ความหมายและการใช้งาน
width() ชุดวิธีการหรือส่งกลับความกว้างขององค์ประกอบที่เลือก
เมื่อวิธีการนี้ถูกนำมาใช้เพื่อกลับความกว้างก็จะส่งกลับความกว้างขององค์ประกอบการจับคู่ครั้งแรก
เมื่อวิธีการนี้จะใช้ในการกำหนดความกว้างจะกำหนดความกว้างขององค์ประกอบทั้งหมดที่จับคู่
ขณะที่ภาพด้านล่างแสดงให้เห็นถึงวิธีการนี้ไม่รวมถึงการขยายพรมแดนหรือคิดเป็นอัตรา
วิธีการที่เกี่ยวข้อง:
- height() - ชุดหรือผลตอบแทนที่สูงของสิ่งนั้น ๆ
- innerWidth() - ส่งกลับความกว้างของสิ่งนั้น ๆ (รวม padding)
- innerHeight() - ส่งกลับความสูงขององค์ประกอบนี้ (รวมถึงช่องว่าง)
- outerWidth() - ส่งกลับความกว้างขององค์ประกอบนี้ (รวมถึงการขยายและชายแดน)
- outerHeight() - ส่งกลับความสูงขององค์ประกอบนี้ (รวมถึงการขยายและชายแดน)
วากยสัมพันธ์
กลับความกว้าง:
$(selector).width()
ตั้งค่าความกว้าง:
$(selector).width(value)
ตั้งค่าความกว้างโดยใช้ฟังก์ชั่น:
$(selector).width(function(index,currentwidth))
| พารามิเตอร์ | ลักษณะ |
|---|---|
| value | ที่จำเป็นสำหรับการตั้งค่าความกว้าง ระบุความกว้างใน px ที่ em, PT ฯลฯ หน่วยเริ่มต้นเป็นพิกเซล |
| function(index,currentwidth) | ไม่จำเป็น ฟังก์ชั่นระบุที่ส่งกลับความกว้างใหม่ขององค์ประกอบที่เลือก
|
ลองตัวเอง - ตัวอย่าง
ตั้งค่าความกว้างของธาตุนั้น
วิธีการตั้งค่าความกว้างขององค์ประกอบโดยใช้หน่วยงานต่างๆ
ลดความกว้างโดยใช้ฟังก์ชั่น
วิธีการใช้งานฟังก์ชั่นเพื่อลดความกว้างของสิ่งนั้น ๆ
กลับความกว้างของเอกสารและหน้าต่างองค์ประกอบ
วิธีการคืนความกว้างปัจจุบันของเอกสารและหน้าต่างองค์ประกอบ
ขนาดจอแสดงผลด้วยวิธีการที่เกี่ยวข้อง
วิธีการใช้ width(), height(), innerHeight(), innerWidth(), outerWidth() และ outerHeight()
ออกแบบที่ตอบสนองกับ width()
วิธีการเปลี่ยนสีพื้นหลังของหน้าบนหน้าจอที่มีขนาดเล็ก