naturalHeight : This property is used to get the original height of an image. Since the height of an image to be displayed on the webpage can be modified using the ‘height’ attribute in the <img> tag, hence the naturalHeight property becomes useful in situations where the original height of the image is required rather than the customized one and it is a read-only property.
Syntax :
imageObject.naturalHeight
Return Value: It returns the original height of an image in pixels.
Example: In this example, we will see the use of the DOM image naturalHeight property.
HTML
<!DOCTYPE html><html>
<body>
<center>
<img src=
id="image" width="250" height="205"
class="alignnone size-medium wp-image-1092360" />
<br>
<br>
<button type="button"
onclick="getHeight()">
Click
</button>
<div id="text"></div>
</center>
<script>
function getHeight() {
let imgObject =
document.getElementById("image");
let output =
document.getElementById("text");
output.innerHTML =
"Height of image: " + imgObject.height +
"<br>naturalHeight of image: " +
imgObject.naturalHeight;
}
</script>
</body>
</html>
|
Output:
Supported Browser:
- Google Chrome
- Internet Explorer 9.0 or above
- Mozilla Firefox
- Safari
- Opera