HTML DOM Textareaのcolsプロパティとは？使い方とサンプルコードを解説
HTML DOM の Textarea cols プロパティは、HTML ドキュメント内のテキストエリア（<textarea>）要素が持つ cols 属性の値を取得したり、変更したりするために使用されます。
cols 属性は、テキストエリアの1行に表示できる平均的な文字数（列数）を指定するもので、この値を操作することでテキストエリアの横幅を動的に制御できます。
構文
cols プロパティの基本的な構文は以下の通りです。
1. cols の値を取得する場合
object.cols
2. cols の値を設定する場合
object.cols = "number"
number には、表示したい列数（文字数）を表す数値を指定します。
使用例
それでは、HTML DOM Textarea cols プロパティの具体的な使用例を見てみましょう。以下のサンプルでは、ボタンをクリックするとテキストエリアの cols 値が「50」に設定される仕組みです。
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightseagreen;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
<body>
<h1>DOM Textarea cols Property Demo</h1>
<textarea>Hi! I'm a textarea element in an HTML document with some dummy text.</textarea>
<button onclick="set()" class="btn">Set Cols = 50</button>
<script>
function set() {
document.querySelector("textarea").cols = '50';
}
</script>
</body>
</html>実行結果
ページを開くと、初期状態のテキストエリアが表示されます。
ここで「Set Cols = 50」ボタンをクリックすると、JavaScript の set() 関数が実行され、テキストエリアの cols 属性の値が「50」に変更され、テキストエリアの幅が広がります。
まとめ
Textarea cols プロパティを使えば、JavaScript からテキストエリアの列数（横幅）を簡単に読み取ったり、動的に変更したりできます。ユーザーの操作に応じてフォームの見た目を変えたい場合などに活用できる便利なプロパティです。
-
HTML DOM TextareaのmaxLengthプロパティとは？使い方をコード例付きで解説
HTML DOMのTextarea maxLengthプロパティは、HTMLドキュメント内のテキストエリア（<textarea>）要素に設定されているmaxLength属性の値を取得（参照）および変更（設定）するためのプロパティです。 maxLength属性は、テキストエリアに入力できる最大文字数を制限する役割を持ちます。このプロパティを活用すれば、JavaScriptから動的に文字数制限の確認や変更を行うことができます。 構文 maxLengthプロパティの基本的な構文は以下のとおりです。 1. maxLengthの値を取得する場合 object.maxLength 2. ma
-
HTML DOM Textareaのrequiredプロパティとは？構文と使い方をサンプルコード付きで解説
HTML DOM の Textarea required プロパティは、HTMLドキュメント内のテキストエリア（<textarea>要素）に設定された required 属性の値を取得・変更するためのプロパティです。required 属性は、フォーム送信時に入力が必須であることを示す属性です。この属性が true に設定されている場合、テキストエリアが空のままではフォームを送信できなくなります。構文required プロパティの構文は以下のとおりです。1. required の値を取得するobject.required2. required の値を設定するobject.requir