HTML Kiểu DOM Văn bản

Thuộc tính DOM style textDecorationStyle trả về và sửa đổi cách dòng sẽ được hiển thị 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ả về văn bảnDecorationStyle

object.style.textDecorationStyle

Sửa đổi văn bảnDecorationStyle

object.style.textDecorationStyle = “value”

Giá trị

Ở đây, giá trị có thể là -

Giá trị	Giải thích
inherit	Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó.
đầu tiên	Nó đặt giá trị thuộc tính này thành giá trị mặc định.
solid	Nó chỉ hiển thị dòng dưới dạng nét liền.
gấp đôi	Nó hiển thị dòng dưới dạng một dòng kép.
dấu chấm	Nó chỉ hiển thị dòng dưới dạng đường chấm.
gạch ngang	Nó hiển thị dòng dưới dạng nét đứt.
gợn sóng	Nó hiển thị đường dưới dạng đường gợn sóng.

Ví dụ

Hãy để chúng tôi xem một ví dụ về 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>DOM Style textDecorationStyle 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 textDecorationStyle</button>
<script>
   function add() {
      document.querySelector('p').style.textDecorationStyle = "wavy";
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML Kiểu DOM Văn bản

Nhấp vào “ Thay đổi textDecorationStyle ”Để thay đổi kiểu sử dụng dòng để trang trí đoạn văn bản.

HTML Kiểu DOM Văn bản