How to use document.images in JavaScript ?

How to use document.images in JavaScript ?

Last Updated : 06 May, 2024

In JavaScript, the document.images property returns a collection of all "<img>" elements within the current document. We can manipulate these images using various properties and methods. We will see how to work with document.images in JavaScript.

Approach

First, create a basic HTML structure and add some images.
Then use document.images to access all <img> elements in the document.
Then add an event listener of a button and handle the click event and with the help of the event we can change the different properties of the image.
Within the event listener defines a loop and iterates over the image by the index where we can update the "alt", "width", and "height" attributes of each image element.

Example: The example works with document.images in JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Manipulating Images with JavaScript</title>
    <style>
        body {
            height: 100vh;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            text-align: center;
        }

        h2 {
            margin-top: 0;
            color: #14e611;
            font-size: 2.3rem;
        }

        img {
            border: 2px solid black;
            margin-left: 50px;
        }

        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>

    <div class="container">
        <h2>Images Manipulation Example 
              with document.images
          </h2>

        <div class="img_container">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154939/html-(1).jpg" 
                 alt="Image 1"
                 width="200" height="150">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154940/js-(1).jpg" 
                 alt="Image 2"
                 width="200" height="150">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154942/web-(1).jpg" 
                 alt="Image 3"
                 width="200" height="150">
            <img src="" alt="Image 4" 
                 width="200" height="150">
        </div>
        <button id="btn">Change Image Attributes</button>
    </div>

    <script>
        let btn = document.querySelector("#btn");
        btn.addEventListener("click", function () {
            let images = document.images;
            for (let i = 0; i < images.length; i++) {
                let image = images[i];
                image.alt = `Alt has Changed ${i}`;
                image.width = 300;
                image.height = 200;
            }

        });

    </script>

</body>

</html>

Output:

documentimages — Output :document.images in JavaScript

How to use document.images in JavaScript ?

S

skaftafh

Improve

Article Tags :

Similar Reads

How to Display Images in JavaScript ?

To display images in JavaScript, we have different approaches. In this article, we are going to learn how to display images in JavaScript. Below are the approaches to display images in JavaScript: Table of Content Using CreateElementUsing InnerHTMLApproach 1: Using CreateElementIn an HTML document,

How to Crop an Image in JavaScript?

To crop an image in JavaScript, you can use the <canvas> element to manipulate the image's dimensions and crop it to a specified area. This approach is flexible and works entirely in the browser without needing external libraries. Here's a step-by-step example demonstrating how to crop an imag

How to create an image map in JavaScript ?

An image map is nothing but an image that is broken into various hotspots and each hotspot will take you to a different file. Hotspots are nothing but clickable areas which we create on an image by using the <area> tag. This type of map is called a client-side image map as the map is embedded

How to Create an Image Element using JavaScript?

Creating an image element dynamically using JavaScript is a useful technique when you want to add images to a webpage without having to manually write the <img> tag in your HTML. This allows for more flexibility, as we can create and manipulate images based on user interactions or other condit

How to Return the Number of Images in a Document with JavaScript?

We will learn how we can return the number of images in a document with JavaScript. We need to access and manipulate the DOM (Document Object Model) of the webpage. The DOM represents the structure of an HTML document as a tree of objects. JavaScript can interact with the DOM to manipulate and retri