HTML DOM Image Object

HTML Web Development Front End Technology

The HTML DOM image Object represents the <img> element of an HTML document.

Let us create an img object −

Syntax

Following is the syntax −

document.createElement(“IMG”);

Properties

Following are the properties of image Object −

Property	Explanation
alt	It returns and modify the value of the alt attribute of an image HTML element.
complete	It returns whether the browser finished loading an image in HTML web page or not.
crossOrigin	It returns and modify the CROS setting of an image HTML element.
height	It returns and modify the value of the height attribute of an image HTML element.
naturalHeight	It returns the natural height of an image in HTML document.
naturalWidth	It returns the natural width of an image in HTML document.
src	It returns and modify the value of src attribute of an image HTML element.
useMap	It returns and alter the value of useMap attribute of an image HTML element.
width	It returns and alter the value of width attribute of an image HTML element.
isMap	It returns and modify whether the image in HTML document would be part of server-side image-map or not

Example

Let us see an example of HTML DOM image object −

Live Demo

<!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 Example</h1>
<button onclick="createIframe()" class="btn">Click me to create an image</button>
<script>
   function createIframe() {
      var x = document.createElement("IMG");
      x.setAttribute("src",https://www.tutorialspoint.com/servlets/images/servlets-mini-logo.jpg");
      x.setAttribute("alt", "Learn Servlets");
      document.body.appendChild(x);
   }
</script>
</body>
</html>