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

HTML DOM の option 要素の text プロパティ：テキストの取得と変更方法を解説

HTML DOM の text プロパティを使うと、HTML ドキュメント内の option 要素（ドロップダウンリストの選択肢）のテキストを取得したり、変更したりすることができます。

構文

text プロパティの構文は以下の通りです。

1. テキストを取得する場合

object.text

2. テキストを変更する場合

object.text = "テキスト"

サンプルコード

それでは、HTML DOM の option 要素の text プロパティの使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    html{
        height:100%;
    }
    body{
        text-align:center;
        color:#fff;
        background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90% ) no-repeat;
        height:100%;
    }
    p{
        font-weight:700;
        font-size:1.1rem;
    }
    .drop-down{
        display:block;
        width:35%;
        border:2px solid #fff;
        font-weight:bold;
        padding:2px;
        margin:1rem auto;
        outline:none;
    }
    .btn{
        background:orange;
        border:none;
        height:2rem;
        border-radius:2px;
        width:35%;
        margin:2rem auto;
        display:block;
        color:#fff;
        font-weight:bold;
        outline:none;
        cursor:pointer;
    }
    .show{
        font-size:1.5rem;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Option text Property Demo</h1>
<p>好きな教科を選んでください −</p>
<select class='drop-down'>
<option>Physics</option>
<option>Biology<option>
<option>Maths<option>
</select>
<button type="button" onclick="changePhysicsName()" class="btn">Change Physics
Subject Name</button>
<div class="show"></div>
<script>
    function changePhysicsName() {
        document.querySelector(".drop-down").options[0].text="Applied Physics";
        document.querySelector(".show").innerHTML="Now Physics become Applied Physics";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

HTML DOM の option 要素の text プロパティ：テキストの取得と変更方法を解説

「Change Physics Subject Name」ボタンをクリックすると、「Physics」の選択肢のテキストが変更されます。

HTML DOM の option 要素の text プロパティ：テキストの取得と変更方法を解説

このように、options コレクションで目的の option 要素を指定し、text プロパティに新しい値を代入するだけで、ドロップダウンリストの選択肢の表示テキストを動的に書き換えることができます。ユーザーの操作に応じて選択肢の内容を切り替えたい場合などに活用できる便利なプロパティです。

  1. HTML DOMのdirプロパティとは？テキスト表示方向を変更する方法を解説

    HTML DOMのdirプロパティは、要素内のテキスト表示方向を変更するために使用されるプロパティです。通常、テキストは左から右（ltr）へ表示されますが、このプロパティを使うことで右から左（rtl）への表示や、自動判定（auto）に切り替えることができます。dirプロパティは、要素のdir属性値の取得と設定の両方に対応しており、取得できる値は文字列型として返されます。アラビア語やヘブライ語など、右から左へ記述する言語を扱うWebサイトで特に役立ちます。構文dirプロパティを設定する場合の構文は以下の通りです。HTMLElementObject.dir = ltr|rtl|autoそれぞれの値

  2. HTML DOMのTitle textプロパティとは？使い方とサンプルコードを解説

    HTML DOM の text プロパティは、ドキュメント内の <title> 要素が持つテキスト（タイトル文字列）を取得、または設定するために使用されます。このプロパティを活用することで、JavaScript からページタイトルを動的に読み取ったり変更したりすることが可能になります。 構文（シンタックス） テキスト値を取得する場合 titleElementObject.text テキスト値を文字列として設定する場合 titleElementObject.text = string 設定できる値は文字列のみです。指定した文字列がブラウザのタブやお気に入りに表示されるページタイトルと