Thuộc tính HTML DOM style textDecorationLine trả về và sửa đổi kiểu dòng trang trí văn bản của một phần tử trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Trả về văn bảnDecorationLine
object.style.textDecorationLine
-
Sửa đổi textDecorationLine
object.style.textDecorationLine = “value”
Giá trị
Ở đây, giá trị có thể là -
| Giá trị | Giải thích |
|---|---|
| kế thừa | Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| ban đầu | Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| không có | Nó chỉ đại diện cho văn bản bình thường có nghĩa là văn bản không có bất kỳ dòng nào. |
| gạch dưới | Nó đặt một dòng dưới văn bản. |
| gạch ngang | Nó đặt một dòng trên văn bản. |
| dòng qua | Nó đặt một dòng xuyên qua văn bản. |
Ví dụ
Hãy để chúng tôi xem một ví dụ về 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>DOM Style textDecorationLine Property Example</h1>
<p>This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.</p>
<button onclick="add()" class="btn">Change textDecorationLine</button>
<script>
function add() {
document.querySelector('p').style.textDecorationLine = "underline";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Thay đổi textDecorationLine ”Để thay đổi loại dòng được sử dụng để trang trí văn bản đoạn văn.
