Open In App

HTML | DOM Textarea rows Property

Last Updated : 31 Jul, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

The DOM Textarea rows Property is used to set or return the value of a rows attribute of a textarea field. The rows attribute specifies the number of visible text lines for the control i.e the number of rows to display. 

Syntax:

  • It is used to Return the rows property:
textareaObject.rows
  • It is used to Set the rows property:
textareaObject.rows = number

Property Values: 

  • number: It specifies a visible number of rows in a textarea field. It has a default value which is 2. 

Return Value: It returns a numeric value that represents the height of a textarea field containing the characters. 

Example-1: HTML program to illustrate set the DOM Textarea rows Property. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM Textarea rows Property</title>
    <style>
        h1,
        h2 {
            text-align: center;
        }
    </style>
</head>
 
<body style="text-align:center;">
    <h1 style="color: green;">
            GeeksforGeeks
        </h1>
 
    <h2>
            DOM Textarea rows Property
        </h2>
 
    <!-- Below id assigned to Textarea Element -->
    <textarea id="GFG" rows="5" cols="23">
        This paragraph has number of rows equal to 5.
    </textarea>
    <br>
   
    <button type="button"
            onclick="myGeeks()">
      Submit
    </button>
 
    <script>
        function myGeeks() {
           
         // Change the number of rows in a Textarea
          document.getElementById("GFG").rows =
              "10";
        }
    </script>
</body>
 
</html>


Output: 

Before Clicking On Button:

  

After Clicking On Button :

  

Example-2: HTML program to illustrate to return the DOM Textarea rows Property. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM Textarea rows Property</title>
    <style>
        h1,
        h2 {
            text-align: center;
        }
    </style>
</head>
 
<body style="text-align:center;">
    <h1 style="color: green;">
            GeeksforGeeks
        </h1>
 
    <h2>
            DOM Textarea rows Property
        </h2>
 
    <!-- Below id assigned to Textarea Element -->
    <textarea id="GFG" rows="5" cols="23">
        This paragraph has number of rows equal to 5.
    </textarea>
    <br>
    <button type="button" onclick="myGeeks()">Submit</button>
    <p id="sudo"></p>
    <script>
        function myGeeks() {
           
            // Return number of rows in the textare.
            var x = document.getElementById("GFG").rows;
            document.getElementById("sudo").innerHTML =
              "There are" + x + " rows in a Textarea height.";
        }
    </script>
</body>
 
</html>


Output: Before Clicking On Button:

  

After Clicking On Button:

  

Supported Browsers: The browser supported by Textarea rows Property are listed below:

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 6
  • Firefox 1
  • Opera 12.1
  • Safari 4


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads