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

HTMLDOM入力隠し値プロパティ

HTML DOM入力非表示値プロパティは、HTMLドキュメントのtype =” hidden”の入力フィールドのvalue属性の内容を返し、変更します。

構文

以下は構文です-

1.戻り値

object.value

2.値の変更

object.value=”text”

例

HTMLDOM入力の非表示値プロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
      background-color:#F19A3E;
      color:#fff;
   }
   .btn{
      background-color:#3C787E;
      border:none;
      height:2rem;
      border-radius:50px;
      width:60%;
      margin:1rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      color:#fff;
      font-size:1.2rem;
      font-weight:600;
   }
</style>
</head>
<body>
<h1>DOM Hidden value Property Example</h1>
Here is hidden input field:
<input type="hidden" class="input-field" value="Hi! I was previous value of hidden input">
<button onclick="getType()" class="btn">Click to change value</button>
<div class="show"></div>
<script>
   function getType() {
      var inputField = document.querySelector(".input-field");
      var msgDiv = document.querySelector(".show");
      msgDiv.innerHTML = "" + inputField.value + "";
      inputField.value = "Hello! I'm new value of hidden input"
      msgDiv.innerHTML +="" + inputField.value + "";
   }
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTMLDOM入力隠し値プロパティ

コンソール-

HTMLDOM入力隠し値プロパティ

「クリックして値を変更」をクリックします 」ボタンをクリックして、非表示の入力フィールドの値を変更します。コンソールのスクリーンショットを見て、簡単に理解してください-

HTMLDOM入力隠し値プロパティ

コンソール-

HTMLDOM入力隠し値プロパティ


  1. HTMLDOM入力ラジオ値プロパティ

    HTML DOM入力ラジオ値プロパティは、type =” radio”を持つ入力要素とvalue属性に関連付けられています。ラジオボタンの値属性の値を返すか、設定するために使用されます。 ラジオボタンのvalueプロパティは、コンテンツが表示されないだけなので、Webサイトのユーザーインターフェイスには影響しません。ただし、フォームの送信時に同じグループの複数のボタンを区別するために使用できます。 構文 以下は、-の構文です。 値プロパティを設定します- radioObject.value = text; ここでは、ラジオボタンの値を指定するためにテキストが使用されています。 例 入

  2. HTMLDOM入力範囲値プロパティ

    HTML DOM入力範囲valueプロパティは、type =” range”を持つinput要素とvalue属性に関連付けられています。スライダー制御値属性の値を返す、または設定するために使用します。 value属性は、デフォルト値またはスライダーをドラッグして設定された値にすることができます。 構文 以下は、-の構文です。 値プロパティの設定- rangeObject.value = text; ここでは、テキストは範囲スライダーコントロールの値を指定するために使用されます。 例 入力範囲値プロパティの例を見てみましょう- <!DOCTYPE html> <