HTMLDOM入力範囲無効プロパティ
HTML DOM入力範囲無効プロパティは、範囲スライダーを無効にするかどうかを設定または返すために使用されます。ブール値を使用します。trueは範囲スライダーを無効にする必要があり、それ以外の場合はfalseを表します。デフォルトでは、disabledプロパティはfalseに設定されています。ただし、無効になっている要素はデフォルトでグレー表示され、クリックできません。
構文
以下は、-
の構文です。無効なプロパティの設定-
rangeObject.disabled = true|false;
ここで、true =範囲スライダーは無効であり、false=範囲スライダーは無効ではありません。デフォルトではfalseです。
例
入力範囲が無効になっているプロパティの例を見てみましょう-
<!DOCTYPE html>
<html>
<body>
<h1>Input range disabled Property</h1>
<form>
<input type="range" id="RANGE1" name="VOL">
</form>
<p>Disable the above range slider by clicking on the DISABLE button</p>
<button type="button" onclick="disableRange()">DISABLE</button>
<p id="Sample"></p>
<script>
function disableRange() {
document.getElementById("RANGE1").disabled=true;
document.getElementById("Sample").innerHTML = "The range slider is now disabled" ;
}
</script>
</body>
</html> 出力
これにより、次の出力が生成されます-
DISABLEボタンをクリックすると、スライダーを移動できなくなります-
上記の例では-
type =“ range”、id =“ RANGE1”、name =“ VOL” −
を持つフォーム内に含まれる入力フィールドを作成しました<form> <input type="range" id="RANGE1" name="VOL"> </form>
次に、ユーザーがクリックしたときにdisableRange（）メソッドを実行するボタンDISABLEを作成しました-
<button type=”button” onclick="disableRange()">DISABLE</button>
disableRange（）メソッドは、getElementById（）メソッドを使用して範囲タイプの入力要素を取得し、そのdisabledプロパティをtrueに設定します。これにより、範囲スライダーが移動できなくなり、ユーザーは範囲スライダーを操作できなくなります。スライダーが修正されました-
function disableRange() {
document.getElementById("RANGE1").disabled=true;
document.getElementById("Sample").innerHTML = "The range slider is now disabled" ;
} -
HTMLDOM入力範囲値プロパティ
HTML DOM入力範囲valueプロパティは、type =” range”を持つinput要素とvalue属性に関連付けられています。スライダー制御値属性の値を返す、または設定するために使用します。 value属性は、デフォルト値またはスライダーをドラッグして設定された値にすることができます。 構文 以下は、-の構文です。 値プロパティの設定- rangeObject.value = text; ここでは、テキストは範囲スライダーコントロールの値を指定するために使用されます。 例 入力範囲値プロパティの例を見てみましょう- <!DOCTYPE html> <
-
HTMLDOM入力範囲タイププロパティ
HTML DOM入力範囲typeプロパティは、type =” range”を持つinput要素に関連付けられています。入力範囲要素の範囲を常に返します。 構文 範囲タイププロパティの構文は次のとおりです- rangeObject.type 例 範囲タイププロパティの例を見てみましょう- <!DOCTYPE html> <html> <body> <h1>Input range type Property</h1> <form> VOLUME <input type="range" id=&qu