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
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>
← Subscribe to our YouTube Channel here