HTML DOM Image Object: คุณสมบัติและตัวอย่าง

HTML DOM Image Object แทนอิลิเมนต์ <img> ในเอกสาร HTML ใช้สร้าง จัดการ และเข้าถึงคุณสมบัติของรูปภาพได้ผ่าน JavaScript

รูปแบบการสร้าง (Syntax)

document.createElement("IMG");

คุณสมบัติหลัก (Properties)

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

สร้างรูปภาพใหม่เมื่อคลิกปุ่ม:

<!DOCTYPE html>
<html>
<head>
    <style>
        body { text-align: center; }
        .btn { background-color: lightblue; border: none; height: 2rem; border-radius: 50px; width: 60%; margin: 1rem auto; display: block; }
    </style>
</head>
<body>
    <h1>ตัวอย่าง DOM Image Object</h1>
    <button onclick="createImage()" class="btn">คลิกเพื่อสร้างรูปภาพ</button>
    <script>
        function createImage() {
            var img = document.createElement("IMG");
            img.setAttribute("src", "https://www.tutorialspoint.com/servlets/images/servlets-mini-logo.jpg");
            img.setAttribute("alt", "Learn Servlets");
            document.body.appendChild(img);
        }
    </script>
</body>
</html>

การใช้งานคุณสมบัติ naturalWidth/naturalHeight

มีประโยชน์เมื่อต้องการทราบขนาดจริงของรูปภาพก่อนแสดงผล:

var img = document.querySelector("img");
console.log("ขนาดจริง: " + img.naturalWidth + "x" + img.naturalHeight);