Thuộc tính style.textDecoration trong HTML DOM trả về và cho phép áp dụng một hoặc nhiều trang trí (decoration) lên văn bản của một phần tử trong tài liệu HTML. Đây là shorthand cho textDecorationLine, textDecorationStyle, textDecorationColor.
Cú pháp
Lấy giá trị textDecoration
object.style.textDecoration
Thay đổi textDecoration
object.style.textDecoration = "value"
Các giá trị
Giá trị có thể là:
| Giá trị | Mô tả |
|---|---|
| inherit | Kế thừa giá trị từ phần tử cha. |
| initial | Đặt về giá trị mặc định. |
| none | Văn bản bình thường không có đường trang trí. |
| underline | Đặt đường dưới văn bản (gạch chân). |
| overline | Đặt đường trên văn bản (gạch trên). |
| line-through | Đặt đường gạch ngang văn bản (gạch bỏ). |
Ví dụ
Ví dụ sử dụng thuộc tính style.textDecoration:
<!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 style textDecoration DOM</h1>
<p>Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả.</p>
<button onclick="add()" class="btn">Thiết lập textDecoration</button>
<script>
function add() {
document.querySelector('p').style.textDecoration = "underline";
}
</script>
</body>
</html>
Kết quả
Nhấn nút Thiết lập textDecoration để thiết lập gạch chân cho văn bản đoạn văn.