Đối tượng Image trong HTML DOM

Đối tượng Image trong HTML DOM đại diện cho phần tử <img> trong tài liệu HTML. Nó cho phép truy xuất và thao tác với các thuộc tính của hình ảnh thông qua JavaScript.

Tạo đối tượng Image

document.createElement("IMG");

Các thuộc tính chính của đối tượng Image

Ví dụ: Tạo hình ảnh động bằng JavaScript

<!DOCTYPE html>
<html>
<head>
    <style>
        body { text-align: center; font-family: sans-serif; }
        .btn {
            background-color: #007bff; color: white; border: none;
            padding: 10px 20px; border-radius: 5px; cursor: pointer;
            font-size: 1rem; margin-top: 20px; display: inline-block;
        }
        .btn:hover { background-color: #0056b3; }
    </style>
</head>
<body>
    <h1>Ví dụ DOM Image Object</h1>
    <button onclick="createImage()" class="btn">Tạo hình ảnh</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");
            img.style.maxWidth = "100%";
            img.style.height = "auto";
            document.body.appendChild(img);
        }
    </script>
</body>
</html>

Kết quả

Trước khi nhấn nút:

Sau khi nhấn nút "Tạo hình ảnh":