Thuộc tính textDecorationColor thiết lập màu cho đường trang trí văn bản (gạch chân, gạch ngang, gạch trên...). Nó tách biệt màu trang trí với màu chữ (color).
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() {
const el = document.getElementById("myText");
el.style.textDecoration = "underline"; /* Bật gạch chân */
el.style.textDecorationColor = "red"; /* Màu gạch chân = đỏ */
/* Màu chữ (color) vẫn giữ nguyên, không bị ảnh hưởng */
}
</script>
</body>
</html>
Các thuộc tính text-decoration liên quan
| Thuộc tính | Mô tả | Giá trị mẫu |
|---|---|---|
textDecorationLine | Loại đường: underline, overline, line-through, blink | "underline" |
textDecorationStyle | Kiểu nét: solid, double, dotted, dashed, wavy | "wavy" |
textDecorationColor | Màu đường trang trí | "red", "#ff0000" |
textDecorationThickness | Độ dày đường (CSS mới) | "2px", "auto", "from-font" |
textDecoration | Shorthand gộp tất cả | "underline wavy red 2px" |
Mẹo: Dùng shorthand textDecoration = "underline wavy red" để gọn. Thuộc tính textDecorationThickness cần hỗ trợ trình duyệt hiện đại.