Thuộc tính paddingLeft của DOM Style trong HTML

Giới thiệu

Thuộc tính paddingLeft của DOM Style (tương ứng CSS padding-left) đọc hoặc thiết lập khoảng đệm bên trái của phần tử.

Cú pháp

// Lấy
element.style.paddingLeft
// Gán
element.style.paddingLeft = "gia_tri"

Giá trị: độ dài (px, em, rem...), %, initial, inherit.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    .outer-box { background:#db133a; width:300px; height:300px; margin:1rem auto; }
    .inner-box { background:#C3C3E6; width:150px; height:150px; }
  </style>
</head>
<body>
  <h1>Ví dụ paddingLeft</h1>
  <div class="outer-box"><div class="inner-box"></div></div>
  <button type="button" onclick="addPadding()">Thêm Padding</button>
  <script>
    function addPadding() {
      var outer = document.querySelector('.outer-box');
      outer.style.paddingLeft = '20px';
      console.log(outer.style.paddingLeft);
    }
  </script>
</body>
</html>

Kết quả hiển thị

Hộp tím bên trong hộp đỏ ban đầu dính lề trái. Nhấn nút -> hộp tím lùi vào 20px.