Cách thiết lập kiểu đường kẻ giữa các cột với JavaScript

Sử dụng thuộc tính columnRuleStyle để thay đổi kiểu đường kẻ (rule) giữa các cột trong bố cục đa cột (multi-column layout).

Ví dụ minh họa

Nhấn nút để thay đổi kiểu đường kẻ từ dotted sang inset:

<!DOCTYPE html>
<html>
<head>
  <style>
    #myID {
      column-count: 4;
      column-rule: 4px dotted yellow;
    }
  </style>
</head>
<body>
  <p>Nhấn nút bên dưới để thay đổi kiểu đường kẻ</p>
  <button onclick="display()">Thay đổi kiểu giữa các cột</button>
  <div id="myID">
    Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
    Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
    Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
    Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
    Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
    Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
  </div>
  <script>
    function display() {
      document.getElementById("myID").style.columnRuleStyle = "inset";
    }
  </script>
</body>
</html>

Các giá trị phổ biến của columnRuleStyle

• none – Không hiển thị đường kẻ
• solid – Đường liền
• dotted – Đường chấm
• dashed – Đường nét đứt
• double – Đường kép
• groove, ridge, inset, outset – Hiệu ứng 3D