คุณสมบัติ HTML DOM Style flexGrow ใช้เพื่อกำหนดสัดส่วนโดยที่องค์ประกอบรองรับขนาดภายในองค์ประกอบแบบยืดหยุ่น รับค่าตัวเลขแบบไม่มีหน่วย
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ flexGrow -
object.style.flexGrow = "number|initial|inherit"
ในที่นี้ number จะระบุจำนวนองค์ประกอบที่จะเติบโตตามสัดส่วนขององค์ประกอบอื่นๆ และค่าเริ่มต้นของมันคือ 0 ค่าเริ่มต้นจะตั้งค่าคุณสมบัติเป็นค่าเริ่มต้นในขณะที่รับช่วงเป็นค่าคุณสมบัติหลัก
ให้เราดูตัวอย่างคุณสมบัติ flexGrow -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 100px;
border: 3px groove navy;
display: flex;
text-align: center;
line-height: 90px;
}
div div {
box-shadow: inset 0 0 4px indigo;
}
#demo div:nth-of-type(even) {
flex-grow: 1;
background-color: lavender;
}
#demo div:nth-of-type(odd) {
flex-grow: 1;
background-color: thistle;
}
</style>
<script>
function changeFlexGrow() {
for(var i=1;i<6;i+=2)
document.getElementsByTagName("div")[i].style.flexGrow="3";
document.getElementById("Sample").innerHTML="The odd div elements are now grown 3x their even counterparts";
}
</script>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div>DEMO</div>
<div></div>
<div></div>
</div>
<p>Change the above odd div size by clicking the below button</p>
<button onclick="changeFlexGrow()">Change Flex Grow</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
เมื่อคลิกปุ่ม “เปลี่ยน Flex Grow ปุ่ม −
