Thuộc tính style textDecorationStyle trong HTML DOM

Thuộc tính style.textDecorationStyle trong HTML DOM trả về và cho phép thay đổi cách hiển thị đường dòng trang trí văn bản (text decoration line) của một phần tử trong tài liệu HTML.

Cú pháp

Lấy giá trị textDecorationStyle

object.style.textDecorationStyle

Thay đổi textDecorationStyle

object.style.textDecorationStyle = "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.
solid	Hiển thị đường liền mạch.
double	Hiển thị đường kép.
dotted	Hiển thị đường chấm.
dashed	Hiển thị đường nét đứt.
wavy	Hiển thị đường sóng.

Ví dụ

Ví dụ sử dụng thuộc tính style.textDecorationStyle:

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; background: lightblue; height: 100vh; }
  p { margin: 1.5rem auto; text-decoration-line: underline; }
  .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 textDecorationStyle 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">Thay đổi textDecorationStyle</button>
<script>
  function add() {
    document.querySelector('p').style.textDecorationStyle = "wavy";
  }
</script>
</body>
</html>

Kết quả

Nhấn nút Thay đổi textDecorationStyle để thay đổi kiểu đường trang trí văn bản đoạn văn.