Thuộc tính style paddingLeft trong HTML DOM

Thuộc tính style.paddingLeft trong HTML DOM trả về và cho phép thay đổi khoảng đệm bên trái (left padding) của một phần tử trong tài liệu HTML.

Cú pháp

Lấy giá trị paddingLeft

object.style.paddingLeft

Thay đổi paddingLeft

object.style.paddingLeft = "value"

Ví dụ

Ví dụ sử dụng thuộc tính style.paddingLeft:

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; background: lightblue; height: 100vh; }
  p { border: 2px solid #fff; }
  .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 paddingLeft DOM</h1>
<p> Chào! Tôi là một đoạn văn tuyệt vời với một số văn bản ngẫu nhiên. Chào! Tôi là một đoạn văn tuyệt vời với một số văn bản ngẫu nhiên. Chào! Tôi là một đoạn văn tuyệt vời với một số văn bản ngẫu nhiên. Chào! Tôi là một đoạn văn tuyệt vời với một số văn bản ngẫu nhiên. </p>
<button onclick="add()" class="btn">Thêm padding</button>
<script>
  function add() {
    document.querySelector('p').style.paddingLeft = "30px";
  }
</script>
</body>
</html>

Kết quả

Nhấn nút Thêm padding để thêm khoảng đệm bên trái cho phần tử đoạn văn.