How to style image in javascript

View Discussion

Table of Contents Show

How do I give a style in JavaScript?
Can JavaScript modify images?
Can you style an image in HTML?
How do I put an image in JavaScript?

Improve Article

Save Article

Read

Discuss

View Discussion

Improve Article

Save Article

Given an HTML element and the task is to create an <img> element and append it to the document using JavaScript. In these examples when someone clicks on the button then the <img> element created. We can replace click event by any other JavaScript event.

Approach 1:

Create an empty img element using document.createElement() method.
Then set its attributes like (src, height, width, alt, title etc).
Finally, insert it into the document.

Example 1: This example implements the above approach.

<!DOCTYPE HTML>

<html>

<head>

<title>

How to create an image element

dynamically using JavaScript ?

</title>

</head>

<body id = "body" style = "text-align:center;">

<h2 style = "color:green;" >

GeeksforGeeks

</h2>

<p id = "GFG_UP" style =

"font-size: 15px; font-weight: bold;">

</p>

<button onclick = "GFG_Fun()">

click here

</button>

<p id = "GFG_DOWN" style =

"color:green; font-size: 20px; font-weight: bold;">

</p>

<script>

var up = document.getElementById('GFG_UP');

up.innerHTML = "Click on the button to add image element";

var down = document.getElementById('GFG_DOWN');

function GFG_Fun() {

var img = document.createElement('img');

img.src =

document.getElementById('body').appendChild(img);

down.innerHTML = "Image Element Added.";

}

</script>

</body>

</html>

Output:

Approach 2:

Create an empty image instance using new Image().
Then set its attributes like (src, height, width, alt, title etc).
Finally, insert it to the document.

Example 2: This example implements the above approach.

<!DOCTYPE HTML>

<html>

<head>

<title>

How to create an image element

dynamically using JavaScript ?

</title>

</head>

<body id = "body" style = "text-align:center;">

<h2 style = "color:green;" >

GeeksforGeeks

</h2>

<p id = "GFG_UP" style =

"font-size: 15px; font-weight: bold;">

</p>

<button onclick = "GFG_Fun()">

click here

</button>

<p id = "GFG_DOWN" style =

"color:green; font-size: 20px; font-weight: bold;">

</p>

<script>

var up = document.getElementById('GFG_UP');

up.innerHTML = "Click on the button to add image element";

var down = document.getElementById('GFG_DOWN');

function GFG_Fun() {

var img = new Image();

img.src =

document.getElementById('body').appendChild(img);

down.innerHTML = "Image Element Added.";

}

</script>

</body>

</html>

Output:

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

How do I give a style in JavaScript?

There are two other ways to set style using JavaScript. The first is to use the setAttribute() method. The second is by adding a class using the add() method of the classList property. The class you add can then be handled using external CSS styling.

Can JavaScript modify images?

Luckily, JavaScript has a lot of free and open-source libraries that can help you do both basic and fairly advanced image editing. Use them in your own projects to give users the option to crop or scale any image after they upload it.

Can you style an image in HTML?

You can use the style attribute to specify the width and height of an image.

How do I put an image in JavaScript?

Create Image Element in JavaScript Create an image element using the createElement() method on the document object. Then, set an image URL to its src attribute. Finally, add the image element to the DOM hierarchy by appending it to the body element.