Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

คุณสมบัติ height ของ DOM Object: กำหนด/อ่านความสูงของ Object

คุณสมบัติ height ของ DOM Object คืออะไร?

คุณสมบัติ height ของ HTMLObjectElement (แท็ก <object>) ใช้สำหรับ อ่านหรือตั้งค่าความสูงของออบเจกต์ในหน่วยพิกเซล (Pixels)**

ไวยากรณ์ (Syntax)

// อ่านค่า
var h = objectElement.height;

// ตั้งค่า
objectElement.height = "350"; // หรือตัวเลข 350

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

<!DOCTYPE html>
<html>
<body>
  <object id="myObj" width="580" height="200" 
          data="https://www.example.com/demo.swf" style="border:2px solid red">
  </object>
  <p>คลิกปุ่มเพื่อเปลี่ยนความสูง</p>
  <button onclick="changeHeight()">อัปเดตความสูงเป็น 350px</button>
  <p id="output"></p>
  
  <script>
    function changeHeight() {
      document.getElementById("myObj").height = "350";
      document.getElementById("output").innerHTML = "ความสูงใหม่: " + document.getElementById("myObj").height + "px";
    }
  </script>
</body>
</html>

ผลลัพธ์

กดปุ่ม "อัปเดตความสูง" ความสูงของ Object จะเปลี่ยนจาก 200px เป็น 350px

จุดสำคัญ

  • คุณสมบัติ height สะท้อนแอตทริบิวต์ height ของ <object>
  • ค่าเป็น String แต่รับตัวเลขได้
  • เปลี่ยนแปลงขนาดแสดงผลของ Object (Flash, PDF, Image, Video, Applet)
  • คู่คู่กับ width property
  • สำหรับ <iframe>, <img>, <video>, <canvas> มีคุณสมบัติ height เหมือนกัน

คู่มือ: width property

ดูรายละเอียด width property ในบทความ HTML DOM Object Width Property