Thuộc tính DOM style textTransform trả về và áp dụng phép chuyển đổi trên văn bản của một phần tử trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Trả lại textTransform
object.style.textTransform
-
Sửa đổi textTransform
object.style.textTransform = “value”
Giá trị
Ở đây, giá trị có thể là -
| Giá trị | Giải thích |
|---|---|
| inherit | Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| đầu tiên | Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| không có | Nó không đặt biến đổi trên văn bản. |
| chữ hoa | Nó chuyển đổi tất cả các ký tự thành chữ hoa. |
| chữ thường | Nó chuyển đổi tất cả các ký tự thành chữ thường. |
| viết hoa | Nó chuyển ký tự đầu tiên của tất cả các từ thành chữ hoa. |
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính style textTransform -
<!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>DOM Style textTransform Property Example</h1>
<p>Hi! I'm a paragraph element with some dummy text.</p>
<button onclick="add()" class="btn">Change textTransform</button>
<script>
function add() {
document.querySelector('p').style.textTransform = "uppercase";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Thay đổi textTransform ”Để áp dụng chuyển đổi trên đoạn văn bản -
