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

ใช้คุณสมบัติ columnRuleStyle เพื่อกำหนดสไตล์ของเส้นแบ่งระหว่างคอลัมน์ สามารถตั้งค่าเป็น solid, dotted, dashed, inset, outset ฯลฯ

ตัวอย่าง

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myID {
        column-count: 4;
        column-rule: 4px dotted yellow;
      }
    </style>
  </head>
  <body>
    <p>Click below to change style</p>
    <button onclick="display()">Change Style between Columns</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.columnRuleStyle = "inset";
      }
    </script>
  </body>
</html>