Cách đặt viết hoa chữ cái đầu (textTransform) bằng JavaScript

Thuộc tính textTransform kiểm soát việc viết hoa/chữ thường của văn bản. Các giá trị: none (mặc định), capitalize (chữ cái đầu mỗi từ), uppercase (tất cả hoa), lowercase (tất cả thường), full-width (chữ toàn chiều rộng), full-size-kana (kana kích thước đầy đủ).

Ví dụ minh họa

Mã sau viết hoa chữ cái đầu mỗi từ khi nhấn nút:

<!DOCTYPE html>
<html>
<body>
  <button onclick="capitalizeText()">Viết hoa chữ cái đầu</button>
  <div id="myID">
    Đây là văn bản demo! Đây là văn bản demo!
  </div>
  <script>
    function capitalizeText() {
      document.getElementById("myID").style.textTransform = "capitalize";
    }
  </script>
</body>
</html>

Các giá trị của textTransform

Giá trị	Hiệu ứng	Ví dụ đầu vào → đầu ra
`none`	Không thay đổi	"hello WORLD" → "hello WORLD"
`capitalize`	Chữ cái đầu mỗi từ hoa	"hello WORLD" → "Hello WORLD"
`uppercase`	Tất cả hoa	"hello WORLD" → "HELLO WORLD"
`lowercase`	Tất cả thường	"hello WORLD" → "hello world"
`full-width`	Chuyển sang dạng full-width (CJK)	"abc" → "ａｂｃ"
`full-size-kana`	Kana kích thước đầy đủ (Japanese)	Dùng cho ruby annotation

Lưu ý:

capitalize chỉ viết hoa ký tự đầu tiên của mỗi "từ" (tách bởi khoảng trắng, dấu chấm, v.v.), không chuyển các ký tự còn lại thành thường.
Thuộc tính này chỉ ảnh hưởng hiển thị, không thay đổi nội dung thực tế (DOM textContent giữ nguyên).
Kết hợp với ::first-letter, ::first-line pseudo-elements để hiệu ứng typography nâng cao.