คุณสมบัติ columnCount ของ HTML DOM Style: จำนวนคอลัมน์

คุณสมบัติ columnCount ใช้สำหรับกำหนดจำนวนคอลัมน์ที่องค์ประกอบจะถูกแบ่ง (CSS Multi-column Layout)

ไวยากรณ์ (Syntax)

object.style.columnCount = "number|auto|initial|inherit"

ค่าที่รองรับ

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
<style>
  div {
    height: 120px;
    column-count: 2;
    border: 2px solid black;
    background-color: mediumvioletred;
  }
  div > div {
    background-color: yellow;
  }
</style>
<script>
  function changeColumnCount() {
    document.getElementsByTagName("div")[0].style.columnCount = "4";
    document.getElementById("Sample").innerHTML = "จำนวนคอลัมน์ถูกเพิ่มเป็น 4 แล้ว";
  }
</script>
</head>
<body>
<div id="DIV1">
  <div></div>
</div>
<p>คลิกปุ่มเพื่อเปลี่ยนคุณสมบัติ column count ของ div ด้านบน</p>
<button onclick="changeColumnCount()">เปลี่ยน Column Count</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: 2 คอลัมน์
หลัง: 4 คอลัมน์

การทำงานร่วมกับ columnWidth

• columnCount เท่านั้น: แบ่งคอลัมน์เท่ากันทุกคอลัมน์
• columnWidth เท่านั้น: สร้างคอลัมน์ให้มากที่สุดตามความกว้างที่กำหนด
• ทั้งคู่: columnCount เป็นค่าสูงสุด (max columns), columnWidth เป็นค่าต่ำสุด (min width)

คุณสมบัติ Multi-column ที่เกี่ยวข้อง

กรณีการใช้งานทั่วไป

• การจัดหน้าหนังสือพิมพ์/นิตยสาร (Newspaper layout)
• รายการสินค้า/บทความแบบหลายคอลัมน์
• ข้อความยาวให้อ่านง่ายขึ้น (Optimal line length ~45-75 ตัวอักษร)

การรองรับเบราว์เซอร์

รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด (Chrome 50+, Firefox 52+, Safari 10+, Edge 12+)