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

ไวยากรณ์ (Syntax)

// อ่านค่า
var w = objectElement.width;

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

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

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

ผลลัพธ์

กดปุ่ม "อัปเดตความกว้าง" ความกว้างของ Object จะเปลี่ยนจาก 300px เป็น 550px

จุดสำคัญ

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

คู่มือ: height property

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