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

HTML DOM Label要素のhtmlForプロパティの使い方を解説

HTML DOMのLabelオブジェクトが持つhtmlForプロパティは、label要素の「for」属性の値を取得・設定するためのプロパティです。「for」属性はラベルとフォーム部品（input要素など）を関連付ける役割を持っており、このプロパティを使えばJavaScriptからその関連付けを動的に操作できます。

構文

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

for属性の値を取得する

labelObject.htmlFor

for属性の値を設定する

labelObject.htmlFor = 'value'

サンプルコード

それでは、Label htmlForプロパティの使用例を見ていきましょう。以下の例では、「エディタを変更」ボタンをクリックすると、ラベルのfor属性が別のテキスト入力欄へと切り替わります。

<!DOCTYPE html>
<html>
<head>
<title>Label htmlFor</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Label-htmlFor</legend>
<label id="CurrentEditor" for="editorTwo">現在のエディタ：</label><br>
<input type="text" id="editorOne" placeholder="editorOne">
<input type="text" id="editorTwo" placeholder="editorTwo">
<input type="button" onclick="getEventData()" value="エディタを変更">
<div id="divDisplay">for属性はeditorTwoに設定されています</div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var labelSelect = document.getElementById("CurrentEditor");
    function getEventData() {
        if(labelSelect.htmlFor === 'editorTwo'){
            divDisplay.textContent = 'for属性はeditorOneに設定されています';
            labelSelect.htmlFor = 'editorOne';
        }
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような画面が表示されます。

「エディタを変更」ボタンをクリックする前

HTML DOM Label要素のhtmlForプロパティの使い方を解説

「エディタを変更」ボタンをクリックした後

HTML DOM Label要素のhtmlForプロパティの使い方を解説

まとめ

htmlForプロパティを使うことで、label要素のfor属性の値を簡単に参照・更新できます。ユーザーの操作に応じてラベルの関連付け先を切り替えたい場合など、動的なフォーム操作に活用できる便利なプロパティです。

  1. HTML DOM Ol reversedプロパティとは？リストの降順・昇順を切り替える方法を解説

    HTML DOMのOl reversedプロパティは、順序付きリスト（<ol>要素）の番号を降順にするか、昇順（デフォルト）にするかを設定・取得するためのプロパティです。JavaScriptから動的にリストの番号付けの方向を変更したい場合に活用できます。構文ブール値（true / false）を取得する場合olObject.reversedreversedプロパティにブール値を設定する場合olObject.reversed = booleanValueここで指定できる「booleanValue」の値と意味は以下の通りです。booleanValue説明trueリストの番号が降順で表示

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

    HTML DOM Track labelプロパティとは？ HTML DOM の Track label プロパティは、<track> 要素の label 属性の値を取得・設定するためのプロパティです。label 属性には、動画プレイヤー上で字幕トラックなどを選択する際にユーザーへ表示されるテキスト（トラック名）を指定します。 構文 label 属性の値を取得する場合 trackObject.label label 属性に値を設定する場合 trackObject.label = labelValue サンプルコード 以下は、Track label プロパティを使った具体的な使用例です