Thuộc tính textDecorationStyle xác định kiểu nét của đường trang trí (gạch chân, gạch trên, gạch ngang). Giá trị: solid, double, dotted, dashed, wavy.
Ví dụ minh họa
Mã sau đổi gạch chân thành nét kép màu đỏ khi nhấn nút:
<!DOCTYPE html>
<html>
<body>
<div id="myText" style="text-decoration: underline;">
Đây là văn bản demo.
</div>
<br>
<button onclick="setDecorationStyle()">Đặt trang trí văn bản</button>
<script>
function setDecorationStyle() {
const el = document.getElementById("myText");
el.style.textDecorationColor = "red";
el.style.textDecorationStyle = "double";
/* Có thể: solid, double, dotted, dashed, wavy */
}
</script>
</body>
</html>
Các kiểu nét (textDecorationStyle)
| Giá trị | Hiển thị |
|---|---|
solid | Nét liền (mặc định) |
double | Hai nét liền song song |
dotted | Chấm tròn nhỏ |
dashed | Nét đứt dài |
wavy | Nét sóng (thường dùng cho lỗi chính tả) |
Shorthand textDecoration
Dùng textDecoration để gộp tất cả:
el.style.textDecoration = "underline wavy red 2px"; /* line style color thickness */
Lưu ý: textDecorationStyle chỉ có tác dụng khi textDecorationLine khác none.