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

HTML DOM入力範囲stepDown()メソッド


HTML DOM入力範囲stepDown()メソッドは、スライダーコントロール値を指定された数だけデクリメントするために使用されます。空白のままにすると、1ずつデクリメントされます。step属性が指定されている場合、stepdown()メソッドはその倍数でデクリメントします。例:step =” 20”の場合、stepDown(2)は20 * 2=40だけデクリメントします

構文

Range stepDown()メソッドの構文は次のとおりです-

rangeObject.stepDown(number)

ここで、numberは、スライダーコントロールのデクリメント値を指定するための必須パラメーターです。空白のままにすると、1ずつ減ります。

範囲stepDown()メソッドの例を見てみましょう-

<!DOCTYPE html>
<html>
<body>
<h1>Input range stepDown() method</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Decrement the slider control value by clicking the below button</p>
<button type="button" onclick="stepDecrement()">DECREMENT</button>
<p id="Sample"></p>
<script>
   function stepDecrement() {
      document.getElementById("RANGE1").stepDown(10);
   }
</script>
</body>
</html>

出力

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

HTML DOM入力範囲stepDown()メソッド

DECREMENTボタンをクリックすると-

HTML DOM入力範囲stepDown()メソッド

上記の例では-

type =“ range、id =“ RANGE1”、name =“ VOL” −

を持つフォーム内に含まれる入力フィールドを作成しました
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
<form>

次に、ユーザーがクリックしたときにstepDecrement()メソッドを実行するボタンDECREMENTを作成しました-

<button type="button" onclick="stepDecrement()">DECREMENT</button>

stepDecrement()メソッドは、getElementById()メソッドを使用して、ID「RANGE1」を渡すことでタイプ範囲の入力フィールドを取得し、10をデクリメント値として指定してstepDown()メソッドを呼び出します。これにより、スライダーが10減少します-

function stepDecrement() {
   document.getElementById("RANGE1").stepDown(10);
}

  1. HTMLDOM入力範囲名プロパティ

    HTML DOM入力範囲名プロパティは、入力範囲フィールドの名前属性を設定または返すために使用されます。 name属性は、サーバーに送信された後のフォームデータを識別するのに役立ちます。 JavaScriptは、name属性を使用して、後で操作するためのフォーム要素を参照することもできます。 構文 以下は、-の構文です。 名前プロパティの設定- rangeObject.name = name 例 ここで、nameはレンジスライダーコントロール名を指定するためのものです。 範囲名プロパティの例を見てみましょう- <!DOCTYPE html> <html> <

  2. HTMLDOM入力範囲の最小プロパティ

    HTML DOM入力範囲の最小プロパティは、範囲スライダーコントロールの最小属性値を設定または返すために使用されます。この属性は、スライダーコントロールの最小値を示すために使用され、スライダーが移動できる値の範囲を作成するためにminプロパティとともに使用されることがよくあります。 構文 以下は、-の構文です。 Rangeminプロパティの設定- rangeObject.min = number ここで、数字は最小スライダー制御値を表します。 例 入力範囲の最小プロパティの例を見てみましょう- <!DOCTYPE html> <html> <bo