Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

HTML DOM Style alignSelf คุณสมบัติ


คุณสมบัติ HTML DOM alignSelf ใช้สำหรับระบุการจัดตำแหน่งรายการที่กำหนดภายในคอนเทนเนอร์แบบยืดหยุ่น คุณสมบัติ alignSelf ใช้เพื่อแทนที่ค่าการจัดตำแหน่งรายการที่ระบุในกริดขององค์ประกอบหรือเลย์เอาต์การแสดงผลแบบยืดหยุ่น

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

การตั้งค่าคุณสมบัติ alignSelf -

object.style.alignSelf = "auto|stretch|center|flex-start|flex-end|baseline|initial|inherit"

คุณค่า

ต่อไปนี้เป็นค่าของคุณสมบัติ alignSelf -

ค่า คำอธิบาย
ยืดกล้ามเนื้อ เป็นค่าเริ่มต้นและใช้เพื่อยืดรายการให้พอดีกับคอนเทนเนอร์
ศูนย์ ใช้สำหรับวางสินค้าไว้ตรงกลางคอนเทนเนอร์
เริ่มต้นแบบยืดหยุ่น เพื่อวางตำแหน่งรายการไว้ที่จุดเริ่มต้นของคอนเทนเนอร์
ปลายงอ การวางตำแหน่งสิ่งของที่ส่วนท้ายของคอนเทนเนอร์
พื้นฐาน การวางตำแหน่งสิ่งของที่เส้นฐานของคอนเทนเนอร์
เริ่มต้น สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น
สืบทอด การสืบทอดค่าคุณสมบัติหลัก

ตัวอย่าง

ให้เราดูตัวอย่างคุณสมบัติ Style alignSelf -

<!DOCTYPE html>
<html>
<head>
<style>
   #container {
      width: 180px;
      height: 220px;
      padding: 10px;
      border: 1px solid #333;
      display: flex;
      align-items:baseline;
      flex-flow: row wrap;
   }
   .ele {
      width: 60px;
      height: 60px;
      background-color: skyblue;
   }
   .ele:nth-child(2n) {
      background-color: orange;
   }
</style>
<script>
   function changeAlign(){
      document.getElementsByClassName("ele")[1].style.alignSelf="flex-end";
   }
</script>
</head>
<body>
<h2>Demo Heading</h2>
<div id="container">
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
</div>
<p>Change the align Self property of the above div by clicking the below button</p>
<button onclick="changeAlign()">CHANGE</button>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

HTML DOM Style alignSelf คุณสมบัติ

เมื่อคลิกปุ่ม CHANGE -

HTML DOM Style alignSelf คุณสมบัติ