Open In App

HTML DOM Textarea cols Property

The DOM Textarea cols Property is used to set or return the value of the cols attribute of a textarea field. The cols attribute how many average-width characters should fit on a single line.

Syntax:



textareaObject.cols
textareaObject.cols = number

Property Values:

Return Value: It returns a numeric value that represents the width of a textarea in characters. 



Example 1: HTML program to illustrate setting the DOM Textarea cols Property




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM Textarea cols Property</title>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h2>
        DOM Textarea cols Property
    </h2>
 
    <!-- Below textarea is assigned a cols value 25
        That is, 25 characters will fit in a line -->
    <textarea id="GFG" rows="4" cols="25">
        A computer science portal for geeks.
    </textarea>
    <br>
    <button type="button" onclick="myGeeks()">
        Submit
    </button>
 
    <script>
        function myGeeks() {
            document.getElementById("GFG").cols = "50";
        }
    </script>
</body>
 
</html>

Output: 

Example 2: HTML program to illustrate the return of the DOM Textarea cols Property




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM Textarea cols Property</title>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h2>
        DOM Textarea cols Property
    </h2>
 
    <!-- Below textarea is assigned a cols value 25
         That is, 25 characters will fit in a line -->
    <textarea id="GFG" rows="4" cols="25">
        A computer science portal for geeks.
    </textarea>
    <br>
    <button type="button" onclick="myGeeks()">
        Submit
    </button>
 
    <p id="sudo"></p>
 
    <script>
        function myGeeks() {
            let g = document.getElementById("GFG").cols;
            document.getElementById(
                "sudo").innerHTML =
                "There are " + g +
                " columns in a textarea width.";
        }
    </script>
</body>
 
</html>

Output:

Note: Both “textareaObject.cols” and “style.width” work as same. 

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


Article Tags :