HTML DOM paddingLeft Property - ตั้งค่า padding ด้านซ้าย

คุณสมบัติ paddingLeft ของ HTMLElement.style ใช้ **อ่านหรือตั้งค่า** padding ด้านซ้ายขององค์ประกอบ เป็นส่วนหนึ่งของ CSS Box Model

รูปแบบการใช้งาน

// อ่านค่า (คืนค่า string พร้อมหน่วย เช่น "20px")
const leftPadding = element.style.paddingLeft;

// ตั้งค่า
element.style.paddingLeft = "20px";
element.style.paddingLeft = "2rem";
element.style.paddingLeft = "5%";

ค่าที่ใช้ได้ (Values)

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>paddingLeft Property Demo</title>
  <style>
    body { font-family: sans-serif; padding: 2rem; text-align: center; }
    .outer-box { 
      background: #db133a; 
      width: 300px; 
      height: 200px; 
      margin: 1rem auto; 
      position: relative;
    }
    .inner-box { 
      background: #c3c3e6; 
      width: 150px; 
      height: 150px; 
      transition: all 0.3s ease;
    }
    button { 
      background: #317EFB; 
      color: white; 
      border: none; 
      padding: 0.75rem 1.5rem; 
      border-radius: 6px; 
      cursor: pointer; 
      font-weight: bold;
      margin: 0.5rem;
    }
    button:hover { background: #2563eb; }
    .reset { background: #9E9E9E; }
    .code { background: #f5f5f5; padding: 1rem; border-radius: 8px; text-align: left; font-family: monospace; }
  </style>
</head>
<body>
  <h1>paddingLeft Property Demo</h1>
  
  <div class="outer-box">
    <div class="inner-box" id="innerBox"></div>
  </div>
  
  <button onclick="addPadding('20px')">20px</button>
  <button onclick="addPadding('2rem')">2rem</button>
  <button onclick="addPadding('10%')">10% (ของ parent)</button>
  <button onclick="addPadding('50px')">50px</button>
  <button class="reset" onclick="resetPadding()">Reset (0)</button>
  
  <div class="code" id="console">console.log output จะแสดงที่นี่</div>
  
  <script>
    const innerBox = document.getElementById('innerBox');
    const consoleEl = document.getElementById('console');
    
    function addPadding(value) {
      innerBox.style.paddingLeft = value;
      const computed = window.getComputedStyle(innerBox).paddingLeft;
      log('paddingLeft set to: ' + value + ' → computed: ' + computed);
    }
    
    function resetPadding() {
      innerBox.style.paddingLeft = '0';
      log('paddingLeft reset to 0');
    }
    
    function log(msg) {
      consoleEl.textContent = msg;
      console.log(msg);
    }
  </script>
</body>
</html>

Padding Properties ครอบครัว

// ทั้ง 4 ด้าน
element.style.padding = "10px";           // ทุกด้าน 10px
element.style.padding = "10px 20px";      // บน/ล่าง 10px, ซ้าย/ขวา 20px
element.style.padding = "10px 20px 30px"; // บน 10, ซ้าย/ขวา 20, ล่าง 30
element.style.padding = "10px 20px 30px 40px"; // บน ขวา ล่าง ซ้าย (clockwise)

// ด้านเดียว
element.style.paddingTop = "10px";
element.style.paddingRight = "20px";
element.style.paddingBottom = "30px";
element.style.paddingLeft = "40px";

// Logical properties (RTL/LTR aware)
element.style.paddingInlineStart = "20px";  // ซ้ายใน LTR, ขวาใน RTL
element.style.paddingInlineEnd = "10px";    // ขวาใน LTR, ซ้ายใน RTL

Box Model และ padding

<div style="width: 300px; padding-left: 20px; box-sizing: content-box;">
  
</div>

<div style="width: 300px; padding-left: 20px; box-sizing: border-box;">
  
</div>

การเข้าถึงค่าที่คำนวณแล้ว (Computed Style)

// element.style.paddingLeft คืนค่า inline style เท่านั้น
// ต้องใช้ getComputedStyle สำหรับค่าจริง (รวม CSS rules)
const computed = window.getComputedStyle(element).paddingLeft;
// คืนค่า "20px" เสมอ (เป็น pixel แล้ว)