คุณสมบัติ style width
- หน้าก่อน whiteSpace
- หน้าต่อไป wordBreak
- กลับไปยังชั้นบน วัตถุ HTML DOM Style
การเขียนและใช้งาน
width ตั้งค่าหรือกลับค่าความกว้างขององค์ประกอบ
width คุณสมบัตินี้มีผลเฉพาะองค์ประกอบชนิด block หรือองค์ประกอบที่มีการจัดลำดับเอกฉันท์ หรือติดตั้งตำแหน่ง absolute หรือ fixed ซึ่งเนื้อหาที่เกินความกว้างขององค์ประกอบนั้นสามารถกำหนดได้ด้วยคุณสมบัติ คุณสมบัติ overflow จัดการ
คำเตือน:ใช้ คุณสมบัติ height ตั้งค่าหรือกลับค่าความสูงขององค์ประกอบ
ดูเพิ่มเติม:
ตัวเรียน CSS:CSS Dimension
ตัวเรียน CSS:CSS โมดูลแบบ
คู่มือ CSS:คุณสมบัติ width
ตัวอย่าง
ตัวอย่าง 1
ตั้งค่าความกว้างของอิเลเมนต์ <button>:
document.getElementById("myBtn").style.width = "300px";
ตัวอย่าง 2
เปลี่ยนความกว้างของอิเลเมนต์ <div>:
document.getElementById("myDIV").style.width = "500px";
ตัวอย่าง 3
เปลี่ยนความสูงและความกว้างของ <img> อิเลเมนต์:
document.getElementById("myImg").style.height = "300px";
document.getElementById("myImg").style.width = "300px";
ตัวอย่าง 4
กลับค่าความกว้างของ <img> อิเลเมนต์:
alert(document.getElementById("myImg").style.width);
รูปแบบ
กลับค่าคุณสมบัติ width:
object.style.width
ตั้งค่าคุณสมบัติ width:
object.style.width = "auto|length|%|initial|inherit"
ค่าของคุณสมบัติ
| ค่า | คำอธิบาย |
|---|---|
| auto | กำหนดความกว้างโดยเบราซเซอร์ โดยเริ่มต้น |
| length | กำหนดความกว้าง ด้วยหน่วยขนาด |
| % | กำหนดความกว้างขององค์ประกอบพ่อ ด้วยร้อยละ |
| initial | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น โปรดดู initial. |
| inherit | ทำให้องค์ประกอบจากองค์ประกอบพ่อของมันสืบทอดคุณสมบัตินี้ โปรดดู inherit. |
รายละเอียดเทคนิค
| ค่าเริ่มต้น: | auto |
|---|---|
| ค่าที่กลับมา: | ข้อความแบบภาพ สำหรับความกว้างขององค์ประกอบ。 |
| เวอร์ชั่น CSS: | CSS1 |
เบราซเซอร์สนับสนุน
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน |
- หน้าก่อน whiteSpace
- หน้าต่อไป wordBreak
- กลับไปยังชั้นบน วัตถุ HTML DOM Style
