and Width
JavaScript is a powerful programming language that is widely used for creating dynamic and interactive web content. One of the most common tasks in web development is working with images. In this article, we will explore how to use JavaScript to get the height and width of an image.
To start off, let’s create an HTML page with an image element and a button.
```
<!DOCTYPE html>
<html>
<head>
<title>JavaScript - Getting Image Height and Width</title>
</head>
<body>
<img src="image.jpg" alt="Image">
<button>Get Image Size</button>
</body>
</html>
```
Next, we will add a script tag in the body of our HTML page to write our JavaScript code.
```
<script>
// JavaScript code goes here
</script>
```
Now, let’s define a function that will be called when the button is clicked. This function will get the image element from the DOM and use the `offsetHeight` and `offsetWidth` properties to retrieve the height and width of the image.
```
<script>
// Function to get image size
function getImageSize() {
// Get image element
var image = document.getElementsByTagName('img')[0];
// Get image height and width
var height = image.offsetHeight;
var width = image.offsetWidth;
// Display image size in console
console.log("Image height: " + height + "px");
console.log("Image width: " + width + "px");
}
</script>
```
We can now call this function when the button is clicked by adding an `onclick` attribute to our button element.
```
<button onclick="getImageSize()">Get Image Size</button>
```
Now, when we click on the button, we will see the image height and width printed in the console.
But what if we want to display this information on the webpage itself? We can do this by creating a `div` element and setting its `innerHTML` property to the image size.
```
<script>
// Function to get image size
function getImageSize() {
// Get image element
var image = document.getElementsByTagName('img')[0];
// Get image height and width
var height = image.offsetHeight;
var width = image.offsetWidth;
// Display image size in console
console.log("Image height: " + height + "px");
console.log("Image width: " + width + "px");
// Display image size on webpage
document.getElementById('image-size').innerHTML = "Image size: " + height + "px x " + width + "px";
}
</script>
<div id="image-size"></div>
```
If we click on the button now, we will see the image size displayed on the webpage itself.
But what if we want to get the image size of multiple images on a page? We can do this by using a loop to iterate through all the image elements and get their size.
```
<script>
// Function to get image sizes
function getImageSizes() {
// Get all image elements
var images = document.getElementsByTagName('img');
// Loop through images
for (var i = 0; i < images.length; i++) {
// Get image height and width
var height = images[i].offsetHeight;
var width = images[i].offsetWidth;
// Display image size in console
console.log("Image " + (i+1) + " height: " + height + "px");
console.log("Image " + (i+1) + " width: " + width + "px");
}
}
</script>
<button onclick="getImageSizes()">Get All Image Sizes</button>
```
Now, when we click on the button, we will see the size of all the images on the page printed in the console.
In conclusion, JavaScript provides us with a simple and efficient way to get the height and width of an image. This can be useful for various tasks such as dynamically resizing images or creating responsive layouts. By using the `offsetHeight` and `offsetWidth` properties, we can easily retrieve the image size and use it in our web development projects.
