Open In App

HTML DOM image naturalHeight property

Last Updated : 21 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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


Similar Reads

HTML DOM Image isMap Property
The HTML DOM Image isMap Property is used to set or return whether the image is a component of a server-side image map. An image map is a picture with clickable areas. When clicking on a server-side image-map, the press coordinates square measure sent to the server as a URL query string. Note: This attribute is permitted only if the &lt;img&gt; ele
2 min read
HTML DOM image naturalWidth property
naturalWidth: This property is used to get the original width of an image. Since the width of an image to be displayed on the webpage can be modified using the 'width' attribute of the &lt;img&gt; tag, hence the naturalWidth property becomes useful in situations where the original width of the image is required rather than the customized one. It is
1 min read
HTML | DOM Input Image src Property
The Input Image src Property is used to sets or returns the value of the src attribute of an Input Image. The src Attribute is used to specify the URL of the image to be used as a submit button. Syntax: It returns the src Property. imageObject.src It sets the src Property. imageObject.src = "URL" Property Values: It contains a single value URL whic
2 min read
HTML DOM Input Image width Property
The Input Image width Property In HTML DOM is used to return the value of the width attribute of the &lt;input type="image"&gt;. Syntax: To return the width Property.imageObject.widthTo set the width Property.imageObject.width = value; Property Value: It contains the numeric value which specifies the width of the image in terms of pixels. Return Va
2 min read
HTML | DOM Input Image type Property
The Input Image type Property in HTML DOM is used to returning the which type of form element an image field is. Syntax: ImageObject.type Return Value: It returns a string value which represents the type of form element the Image field is. Below Example returns the Image Type Property. Example: C/C++ Code &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html
1 min read
HTML DOM Input Image name Property
The HTML DOM Input Image name Property is used for setting or returning the value of the name attribute of the Input Image. The name Attribute is used to reference the form-data after submitting the form or to reference the element in JavaScript. Syntax: To returns the name Property: imageObject.nameTo sets the name Property: imageObject.name=name
2 min read
HTML DOM Input Image formTarget Property
The HTML DOM Input Image formTarget Property is used to set or return the value of the formTarget of the Input Element having an image field. The Target attribute is used to specify whether the submitted result will open in the current window, a new tab or on a new frame. Syntax: To return the formTarget Property.imageObject.formTargetTo set the fo
2 min read
HTML | DOM Input Image value Property
The Input Image value Property in HTML DOM is used to sets or returns the value of the value attribute of the Input Image. Syntax: It returns the value Property.imageObject.valueIt sets the value Property.imageObject.value = value; Property Value It contains the value text Which specify the value of the input Image Return Value It returns a string
2 min read
HTML | DOM input image height Property
The Input Image Height in HTML DOM is used to sets or returns the value of the height Attribute the &lt;input type="image"&gt;. Syntax: It returns the height Property.imageObject.heightIt sets the height Property.imageObject.height = value; Property Value: It contains the numeric value which specifies the height of the image in terms of pixels. Ret
2 min read
HTML | DOM Input Image formEnctype Property
The Input Image formEnctype Property in HTML DOM is used to set or return the value of the Enctype Attribute of an Input Image. This attribute specifies the data that will be present in the form should be encoded when submitting to the server. This type of attribute can be used only if method = “POST”. It overrides the enctype attribute of a &lt;fo
2 min read