แอตทริบิวต์ height ใน HTML: กำหนดความสูงของเอลิเมนต์

แอตทริบิวต์ height คืออะไร?

แอตทริบิวต์ height ใช้กำหนด **ความสูงของเอลิเมนต์ในหน่วยพิกเซล (pixels)** ใน HTML5 **ไม่รองรับการระบุเป็นเปอร์เซ็นต์ (%)** แล้ว (ต่างจาก HTML4) ต้องใช้ CSS แทน (style="height: 50%" หรือ height: 50vh)

เอลิเมนต์ที่รองรับแอตทริบิวต์ height

ตัวอย่าง: การปรับความสูงวิดีโอด้วย JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>HTML Video height Attribute Demo</title>
  <style>
    * { padding: 2px; margin: 5px; }
    form { width: 70%; margin: 0 auto; text-align: center; }
    input[type="button"] { border-radius: 10px; }
    video { background: #333; border-radius: 8px; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>ตัวอย่าง Video Height</legend>
      <video id="myVideo" width="320" height="180" controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        เบราว์เซอร์ไม่รองรับวิดีโอ
      </video><br>
      <input type="button" onclick="increaseHeight()" value="เพิ่มความสูง 50px">
      <input type="button" onclick="resetHeight()" value="รีเซ็ต">
      <div id="info"></div>
    </fieldset>
  </form>

  <script>
    var video = document.getElementById("myVideo");
    var info = document.getElementById("info");
    var originalHeight = video.height;

    function updateInfo() {
      info.textContent = 'ความสูงปัจจุบัน: ' + video.height + 'px (ต้นฉบับ: ' + originalHeight + 'px)';
    }

    function increaseHeight() {
      video.height += 50;
      updateInfo();
    }

    function resetHeight() {
      video.height = originalHeight;
      updateInfo();
    }

    updateInfo(); // แสดงค่าเริ่มต้น
  </script>
</body>
</html>

แอตทริบิวต์ height vs CSS height

แนวทางปฏิบัติที่ดีสำหรับ <img> และ <video>

• **ระบุ width และ height ทั้งคู่** เพื่อป้องกัน Cumulative Layout Shift (CLS) - Core Web Vitals
• ใช้ CSS width: 100%; height: auto; สำหรับ Responsive Images โดยเก็บ aspect ratio ไว้ในแอตทริบิวต์
• สำหรับ <canvas> แอตทริบิวต์ height กำหนด **ขนาดพิกเซลจริงของ Drawing Buffer** (แยกจาก CSS size ที่แสดงบนหน้าจอ)

การเข้าถึงผ่าน JavaScript

// อ่านค่า (พิกเซล)
var h = element.height; // เฉพาะเอลิเมนต์ที่รองรับ
var h = element.getAttribute('height'); // สตริงจาก HTML
var h = element.style.height; // ค่า CSS inline
var h = getComputedStyle(element).height; // ค่าจริงที่แสดง (รวม CSS)

// ตั้งค่า (พิกเซล)
element.height = 300; // สำหรับ img, video, canvas, iframe ฯลฯ
element.setAttribute('height', '300');
element.style.height = '300px';