Thuộc tính textDecoration** (shorthand) hoặc textDecorationLine dùng để thêm các đường trang trí cho văn bản: gạch chân (underline), gạch trên (overline), gạch ngang (line-through), nhấp nháy (blink - đã lỗi thời).
Ví dụ minh họa
Mã sau thêm gạch chân cho văn bản khi nhấn nút:
<!DOCTYPE html>
<html>
<body>
<div id="myText">Đây là văn bản demo.</div><br>
<button onclick="setTextDecoration()">Đặt trang trí văn bản</button>
<script>
function setTextDecoration() {
document.getElementById("myText").style.textDecoration = "underline";
/* Hoặc dùng shorthand đầy đủ:
textDecoration = "underline wavy red 2px" */
}
</script>
</body>
</html>
Các giá trị của textDecorationLine
| Giá trị | Hiển thị | Dùng cho |
|---|---|---|
none | Không trang trí | Xóa trang trí (mặc định) |
underline | Gạch chân | Link, nhấn mạnh |
overline | Gạch trên | Tiêu đề trang trí |
line-through | Gạch ngang giữa | Giá cũ, xóa bỏ |
blink | Nhấp nháy | Đã lỗi thời, trình duyệt bỏ qua |
Kết hợp nhiều dòng
Có thể gán nhiều giá trị cách nhau bởi khoảng trắng:
el.style.textDecorationLine = "underline overline"; /* Cả gạch trên và dưới */ el.style.textDecoration = "underline overline line-through red wavy 2px"; /* Shorthand đầy đủ */
Lưu ý: textDecoration shorthand bao gồm: line style color thickness. Thứ tự không quan trọng.