Thuộc tính textTransform của HTML DOM Style

Thuộc tính style.textTransform trong HTML DOM kiểm soát việc viết hoa/chữ thường của văn bản trong một phần tử.

Cú pháp

Lấy giá trị textTransform

object.style.textTransform

Thiết lập giá trị textTransform

object.style.textTransform = "giá_trị"

Các giá trị hợp lệ

Giá trị	Mô tả
inherit	Kế thừa từ phần tử cha.
initial	Đặt về mặc định.
none	Không biến đổi (giữ nguyên chữ hoa/thường).
uppercase	Chuyển tất cả ký tự thành CHỮ HOA.
lowercase	Chuyển tất cả ký tự thành chữ thường.
capitalize	Viết hoa chữ cái đầu của mỗi từ.

Ví dụ minh họa

Chuyển đoạn văn bản thành chữ hoa khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; background: lightblue; height: 100vh; }
  p { margin: 1.5rem auto; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; }
</style>
</head>
<body>
<h1>Ví dụ thuộc tính textTransform</h1>
<p>Xin chào! Tôi là một đoạn văn bản mẫu.</p>
<button onclick="add()" class="btn">Chuyển thành chữ hoa</button>
<script>
  function add() {
    document.querySelector('p').style.textTransform = "uppercase";
  }
</script>
</body>
</html>

Kết quả

Nhấn "Chuyển thành chữ hoa" để toàn bộ văn bản trong đoạn <p> hiển thị bằng CHỮ HOA.