Javascript Reference - HTML DOM Textarea rows Property








The rows attribute specifies the height of visible number of lines in a textarea.

The rows property sets or gets the lines attribute of a textarea.

Browser Support

rows Yes Yes Yes Yes Yes

Syntax

Return the rows property.

var v = textareaObject.rows 

Set the rows property.

textareaObject.rows=number




Property Values

Value Description
number Set the visible number of lines in the textarea

Return Value

A Number type value representing the height of the textarea.

Example

The following code shows how to change the number of visible lines for a textarea.


<!DOCTYPE html>
<html>
<body>
<textarea id="myTextarea" rows="4" cols="50">
this is a test<!-- www. jav  a2 s .  c  om-->
</textarea>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myTextarea").rows = "10";
}
</script>
</body>
</html>

The code above is rendered as follows:





Example 2

The following code shows how to get the height of a textarea.


<!DOCTYPE html>
<html>
<body>
<textarea id="myTextarea" rows="4" cols="50">
this is a test<!--from   w  ww .  ja  v  a2 s  .  c  o  m-->
</textarea>
<button type="button" onclick="myFunction()">test</button>
<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myTextarea").rows;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to change the height of a textarea using the style.height property.


<!DOCTYPE html>
<html>
<body>
<textarea id="myTextarea">
this is a test<!--from   w w w.  j  a va2 s .  com-->
</textarea>
<button type="button" onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    document.getElementById("myTextarea").style.height = "250px";
}
</script>

</body>
</html>

The code above is rendered as follows: