Thuộc tính DOM style textDecoration trả về và áp dụng một hoặc nhiều trang trí trên 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ả lại văn bản
object.style.textDecoration
-
Sửa đổi văn bản
object.style.textDecoration = “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 textDecoration -
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
margin: 1.5rem auto;
}
.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 textDecoration 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">Set textDecoration</button>
<script>
function add() {
document.querySelector('p').style.textDecoration = "underline";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Đặt textDecoration ”Để đặt gạch chân trên đoạn văn bản.
