CSS ปรับขนาดคุณสมบัติ
ตัวอย่าง
ที่นี่ ผู้ใช้สามารถปรับขนาดทั้งความสูงและความกว้างของ <div> องค์ประกอบ:
div {
resize: both;
overflow: auto;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติresize
กำหนดว่าองค์ประกอบ (และอย่างไร) สามารถปรับขนาดได้โดยผู้ใช้
หมายเหตุ:คุณสมบัติresize
นี้ใช้ไม่ได้กับองค์ประกอบแบบอินไลน์หรือเพื่อบล็อกองค์ประกอบที่ overflow="visible" ดังนั้น ตรวจสอบให้แน่ใจว่าได้ตั้งค่าโอเวอร์โฟลว์เป็น "เลื่อน" "อัตโนมัติ" หรือ "ซ่อน"
ค่าเริ่มต้น: | ไม่มี |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS3 |
ไวยากรณ์ JavaScript: | วัตถุ .style.resize="ทั้งสอง" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Numbers ตามด้วย -moz- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
Property | |||||
---|---|---|---|---|---|
resize | 4.0 | 79.0 | 5.0 4.0 -moz- |
4.0 | 15.0 |
ไวยากรณ์ CSS
resize: none|both|horizontal|vertical|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
none | Default value. The user cannot resize the element | |
both | The user can resize both the height and width of the element | |
horizontal | The user can resize the width of the element | |
vertical | The user can resize the height of the element | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ให้ผู้ใช้ปรับขนาดเฉพาะความสูงของ <div> องค์ประกอบ:
div
{
resize: vertical;
overflow: auto;
}
ตัวอย่าง
ให้ผู้ใช้ปรับขนาดเฉพาะความกว้างของ <div> องค์ประกอบ:
div
{
resize: horizontal;
overflow: auto;
}
ตัวอย่าง
ในเบราว์เซอร์จำนวนมาก <textarea> สามารถปรับขนาดได้ตามค่าเริ่มต้น ที่นี่ เราได้ใช้คุณสมบัติการปรับขนาดเพื่อปิดใช้งานการปรับขนาดได้:
textarea {
resize: none;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS ส่วนต่อประสานผู้ใช้
การอ้างอิง HTML DOM: ปรับขนาดคุณสมบัติ