Thuộc tính style.textDecorationLine trong HTML DOM trả về và cho phép thay đổi loại đường dòng trang trí (decoration line) của văn bản một phần tử trong tài liệu HTML.
Cú pháp
Lấy giá trị textDecorationLine
object.style.textDecorationLine
Thay đổi textDecorationLine
object.style.textDecorationLine = "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.textDecorationLine:
<!DOCTYPE html>
<html>
<head>
<style>
body { color: #000; background: lightblue; height: 100vh; }
p { margin: 1.5rem auto; text-decoration-line: line-through; }
.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 textDecorationLine 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 textDecorationLine</button>
<script>
function add() {
document.querySelector('p').style.textDecorationLine = "underline";
}
</script>
</body>
</html>
Kết quả
Nhấn nút Thay đổi textDecorationLine để thay đổi loại đường trang trí văn bản đoạn văn.