Image width reading and assigning using JavaScript

We can assign or read the width of the image by JavaScript image object properties. We will use getElementById to manage our image.

Let us start with reading the width of an image

var y=document.getElementById("i1").width;

Here i1 is the image object.

Assigning width to an image

document.getElementById("i1").width=200;

We have assigned 200 to the width of the object

Demo managing width of image.

Demo of changing height and width of image.

Here is the code.

<html>
<head>
<title>Demo of changing width of an Image in JavaScript</title>
<link rel="stylesheet" href="../images/all11.css" type="text/css">
<script language='JavaScript' type='text/JavaScript'>
<!--
function resize_img(st) {
var y=document.getElementById("i1").width;
if(st=='up'){
if(y<300){
y=y*2;
}
}else{
if(y>5){
y=y/2;
}
}
document.getElementById("i1").width=y;
document.getElementById("i1").height=7;
}
//-->
</script>
</head>
<body>
<input type=button onClick=resize_img('up') value='Expand'>
<input type=button onClick=resize_img('down') value='Compress'>
<br><br><br><br><br><br>
<img src=images/help.jpg id='i1'>
<br><br>

</body>
</html>

Managing Position of Image
Image Object

Subscribe to our YouTube Channel here

JavaScript image width

Assigning width to an image

Subscribe