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

HTML DOM Fieldset type プロパティとは？使い方とサンプルコードを解説

HTML DOM の Fieldset type プロパティは、fieldset 要素の種類（type）を取得するために使用されるプロパティです。fieldset 要素に対しては常に「fieldset」という値が返され、このプロパティは読み取り専用（read-only）となっています。

構文（シンタックス）

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

fieldsetObject.type

サンプルコード

実際に Fieldset type プロパティを使用した例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<script>
    function FieldType() {
        var field = document.getElementById("FieldSet1").type;
        document.getElementById("Sample").innerHTML = "The fieldset element is of type "+field;
    }
</script>
</head>
<body>
<h1>Sample FORM</h1>
<form id="FORM1">
<fieldset id="FieldSet1">
<legend>User Data:</legend>
Name: <input type="text"><br>
Address: <input type="text"><br>
Age: <input type="text">
</fieldset>
</form>
<br>
<button onclick="FieldType()">GET TYPE</button>
<p id="Sample"></p>
</body>
</html>

実行結果

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

HTML DOM Fieldset type プロパティとは？使い方とサンプルコードを解説

続いて、「GET TYPE」ボタンをクリックすると −

HTML DOM Fieldset type プロパティとは？使い方とサンプルコードを解説

コードの解説

上記の例では、まず form 要素の中に id が「FieldSet1」の fieldset 要素を作成しています。

<form id="FORM1"> <fieldset id="FieldSet1"> <legend>User Data:</legend> Name: <input type="text"><br> Address: <input type="text"><br> Age: <input type="text"> </fieldset> </form>

次に、ユーザーがクリックすると FieldType() 関数を実行する「GET TYPE」ボタンを配置しています。

<button onclick="FieldType()">GET TYPE</button>

FieldType() 関数は、fieldset 要素の type 属性の値を取得し、変数 field に代入します。fieldset 要素の type は常に「fieldset」であるため、必ず「fieldset」という値が返されます。その後、innerHTML プロパティを使って、id が「Sample」の段落要素にこの値を表示しています。

function FieldType() {
    var field = document.getElementById("FieldSet1").type;
    document.getElementById("Sample").innerHTML = "The fieldset element is of type "+field;
}

ポイントまとめ

  • type プロパティは読み取り専用のため、値を設定することはできません。
  • 戻り値は常に文字列「fieldset」です。
  • Chrome、Firefox、Edge、Safari、Opera など主要なブラウザでサポートされています。
  1. HTML DOM Ol typeプロパティとは？順序付きリストのマーカー種類を変更する方法

    HTML DOM の Ol type プロパティは、順序付きリスト（<ol> 要素）で使用されるマーカーの種類に対応する type 属性の値を、取得または設定するためのプロパティです。このプロパティを使うことで、JavaScript から動的にリストの番号スタイル（数字、アルファベット、ローマ数字など）を変更できます。 Ol type プロパティの構文 type プロパティの値を取得する場合 olObject.type type プロパティに値を設定する場合 olObject.type = 1|a|A|i|I; type 属性には以下の5種類の値を指定できます。 1 … 数字（1

  2. HTML DOM Event typeプロパティとは？イベントの種類を取得する方法を実例付きで解説

    HTML DOM Event typeプロパティとはHTML DOMのEvent typeプロパティは、発生したイベントの種類に対応する文字列を返すプロパティです。「click」「keypress」「load」「touchend」など、さまざまなイベントタイプを取得できます。構文イベントの種類を文字列として取得するには、以下のように記述します。event.typeそれでは、Event typeプロパティの具体的な使用例を見ていきましょう。使用例以下のサンプルでは、赤い円形の要素に対して「クリック」または「タッチ」が行われた際に、event.typeでイベントの種類を判定しています。イベントの種