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

บทนำ

เมื่อใช้ CSS Multi-column Layout Property columnRuleColor ใช้ตั้งค่าสีของเส้นคั่นระหว่างคอลัมน์

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #myID {
      column-count: 4;
      column-rule: 4px outset 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.columnRuleColor = "red";
    }
  </script>
</body>
</html>

คำอธิบาย

• column-count: 4 - แบ่งเนื้อหาเป็น 4 คอลัมน์
• column-rule: 4px outset yellow - shorthand: ความกว้าง 4px, สไตล์ outset, สีเหลือง
• columnRuleColor = "red" - เปลี่ยนสีเส้นคั่นเป็นแดง

Column Rule Properties

รูปแบบค่าสี

element.style.columnRuleColor = "red";
element.style.columnRuleColor = "#ff0000";
element.style.columnRuleColor = "rgb(255,0,0)";
element.style.columnRuleColor = "rgba(255,0,0,0.5)";
element.style.columnRuleColor = "hsl(0, 100%, 50%)";
element.style.columnRuleColor = "transparent";

Browser Support

รองรับในเบราว์เซอร์สมัยใหม่ทุกตัว (Chrome, Firefox, Safari, Edge) ต้องใช้ prefix -webkit- สำหรับ Safari เก่า