HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Textareaのrowsプロパティとは?構文と使い方をサンプルコードで解説

HTML DOMのTextarea rowsプロパティは、HTML文書内のテキストエリア(textarea)要素に設定されているrows属性の値を取得・変更することができます。rows属性は、テキストエリアの表示行数を指定するもので、この値を操作することでテキストエリアの高さを動的に変えることが可能です。

構文

rowsプロパティの基本的な構文は以下の通りです。

1. rows属性の値を取得する場合

object.rows

2. rows属性に値を設定する場合

object.rows = "行数";

それでは、実際の使用例を見ていきましょう。

サンプルコード

以下の例では、ボタンをクリックするとテキストエリアのrows属性が「8」に変更されます。

<!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 rows 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 Rows = 8</button>
<script>
    function set() {
        document.querySelector("textarea").rows = '8';
    }
</script>
</body>
</html>

実行結果

ブラウザで表示すると、初期状態のテキストエリアは次のように表示されます。

HTML DOM Textareaのrowsプロパティとは?構文と使い方をサンプルコードで解説

Set Rows = 8」ボタンをクリックすると、JavaScriptによってrows属性の値が「8」に設定され、テキストエリアの表示行数(高さ)が拡張されます。

HTML DOM Textareaのrowsプロパティとは?構文と使い方をサンプルコードで解説

まとめ

rowsプロパティを使えば、JavaScriptからテキストエリアの表示行数を簡単に取得・変更できます。ユーザーの操作に応じて入力欄のサイズを動的に調整したい場合などに便利なプロパティなので、ぜひ活用してみてください。

  1. HTML DOM TextareaのmaxLengthプロパティとは?使い方をコード例付きで解説

    HTML DOMのTextarea maxLengthプロパティは、HTMLドキュメント内のテキストエリア(<textarea>)要素に設定されているmaxLength属性の値を取得(参照)および変更(設定)するためのプロパティです。 maxLength属性は、テキストエリアに入力できる最大文字数を制限する役割を持ちます。このプロパティを活用すれば、JavaScriptから動的に文字数制限の確認や変更を行うことができます。 構文 maxLengthプロパティの基本的な構文は以下のとおりです。 1. maxLengthの値を取得する場合 object.maxLength 2. ma

  2. HTML DOM Textareaのrequiredプロパティとは?構文と使い方をサンプルコード付きで解説

    HTML DOM の Textarea required プロパティは、HTMLドキュメント内のテキストエリア(<textarea>要素)に設定された required 属性の値を取得・変更するためのプロパティです。required 属性は、フォーム送信時に入力が必須であることを示す属性です。この属性が true に設定されている場合、テキストエリアが空のままではフォームを送信できなくなります。構文required プロパティの構文は以下のとおりです。1. required の値を取得するobject.required2. required の値を設定するobject.requir