Thuộc tính columnCount trong HTML DOM Style

Thuộc tính columnCount dùng để thiết lập số lượng cột mà phần tử sẽ được chia.

Cú pháp

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

Giá trị tham số

Giá trị	Mô tả
number	Số cột chia nội dung phần tử
auto	Số cột xác định bởi thuộc tính khác (ví dụ column-width). Mặc định
initial	Giá trị mặc định
inherit	Kế thừa từ phần tử cha

Ví dụ minh họa

<!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 = "Số lượng cột đã được tăng lên 4";
  }
</script>
</head>
<body>
<div id="DIV1">
  <div></div>
</div>
<p>Thay đổi column count của div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeColumnCount()">Thay đổi Column Count</button>
<p id="Sample"></p>
</body>
</html>

Kết quả

Ban đầu div chia 2 cột (nền vàng xen kẽ). Sau khi nhấn nút, chia thành 4 cột.

Lưu ý: column-count và column-width cùng kiểm soát bố cục. Nếu cả hai đều không phải auto, column-count đóng vai trò tối đa (max columns).