Image height reading and assigning using JavaScript

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

Let us start with reading the height of an image

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

Here i1 is the image object.

Assigning height to an image

document.getElementById("i1").height=100;

We have assigned 100 to the hieght of the object

Demo managing height of image.

Demo of changing height and width of image.

Here is the code.

<html>
<head>
<title>Demo of changing height 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 x=document.getElementById("i1").height;
if(st=='up'){
if(x<300){
x=x*2;
}
}else{
if(x>5){
x=x/2;
}
}
document.getElementById("i1").width=10;
document.getElementById("i1").height=x;
}
//-->
</script>
</head>
<body>
<input type=button onClick=resize_img('up') value='Expand'>
<input type=button onClick=resize_img('down') value='Compress'>
<br><br><br>
<img src=images/help.jpg id='i1'>
<br><br>

</body>
</html>

Managing Width of Image
Image Object

Subscribe to our YouTube Channel here

JavaScript image height

Assigning height to an image

Subscribe