วิธีตั้งค่าความกว้างเส้นคั่นระหว่างคอลัมน์ (Column Rule Width) ด้วย JavaScript

บทนำ

Property columnRuleWidth ใช้กำหนดความหนาของเส้นคั่นระหว่างคอลัมน์ใน CSS Multi-column Layout

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    #myID {
      column-count: 4;
      column-rule: 4px solid yellow;
    }
  </style>
</head>
<body>
  <p>คลิกด้านล่างเพื่อเปลี่ยนความกว้าง</p>
  <button onclick="display()">เปลี่ยนความกว้างระหว่างคอลัมน์</button>
  <div id="myID">
    This is demo text. This is demo text. This is demo text. This is demo text.
    This is demo text. This is demo text. This is demo text. This is demo text.
    This is demo text. This is demo text. This is demo text. This is demo text.
    This is demo text. This is demo text. This is demo text. This is demo text.
    This is demo text. This is demo text. This is demo text. This is demo text.
    This is demo text. This is demo text. This is demo text. This is demo text.
  </div>
  <script>
    function display() {
      document.getElementById("myID").style.columnRuleWidth = "8px";
    }
  </script>
</body>
</html>

ค่าที่ใช้ได้

Column Rule Properties ทั้งหมด

// แยกตั้งค่า
element.style.columnRuleWidth = "2px";
element.style.columnRuleStyle = "dashed";
element.style.columnRuleColor = "red";

// Shorthand (แนะนำ)
element.style.columnRule = "2px dashed red";

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

function updateColumnRule() {
  const width = window.innerWidth < 768 ? "1px" : "3px";
  document.getElementById('myID').style.columnRuleWidth = width;
}

window.addEventListener('resize', updateColumnRule);
updateColumnRule();

Browser Support

• Chrome 50+
• Firefox 52+
• Safari 10+ (ต้อง -webkit- prefix เก่า)
• Edge 12+

ข้อสังเกต

columnRuleWidth ทำงานก็ต่อเมื่อมี column-count หรือ column-width กำหนดไว้ และ column-rule-style ไม่เป็น none