Thuộc tính DOM style textIndent trả về và sửa đổi thụt lề của dòng văn bản đầu tiê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 textIndent
object.style.textIndent
-
Sửa đổi textIndent
object.style.textIndent = “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. |
| phần trăm (%) | Nó đặt giá trị theo phần trăm chiều rộng của phần tử mẹ. |
| length | Nó đặt giá trị theo đơn vị chiều dài. |
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính style textIndent -
<!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 textIndent Property Example</h1>
<p>
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
</p>
<button onclick="add()" class="btn">Set textIndent</button>
<script>
function add() {
document.querySelector('p').style.textIndent = "80px";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Đặt textIndent ”Để thay đổi thụt lề dòng đầu tiên của đoạn văn bản.
