Cách lấy hoặc đặt chiều rộng cột (column-width) với JavaScript

Thuộc tính columnWidth xác định chiều rộng tối thiểu mong muốn của mỗi cột trong bố cục đa cột. Trình duyệt sẽ tạo bao nhiêu cột vừa vặn dựa trên chiều rộng container.

Ví dụ minh họa

Nhấn nút để đặt chiều rộng cột thành 70px:

<!DOCTYPE html>
<html>
<body>
  <p>Đặt chiều rộng các cột</p>
  <button onclick="display()">Thay đổi chiều rộng</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.
  </div>
  <script>
    function display() {
      document.getElementById("myID").style.columnWidth = "70px";
    }
  </script>
</body>
</html>

Lưu ý

• column-width là chiều rộng tối thiểu, không phải cố định. Cột có thể rộng hơn để lấp đầy container.
• Kết hợp với column-count: Nếu cả hai đều đặt, trình duyệt tuân theo giới hạn chặt chẽ hơn.
• Để lấy giá trị hiện tại: element.style.columnWidth (chỉ đọc được giá trị inline style).