HTML DOM 输入范围 stepDown() 方法


HTML DOM Input Range stepDown()方法用于将滑块控制值减小一个指定数字。如果留空,它将减小 1。如果指定了 step 属性,则 stepdown() 方法将以该属性的倍数递减。例如:如果 step=”20”,则 stepDown(2) 将递减 20*2=40

语法

以下是 Range stepDown() 方法的语法 -

rangeObject.stepDown(number)

此处, number 是用于指定滑块控制减小值的一个强制参数。如果留空,它将减小 1。

范例

让我们看一个 range 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>

输出

这将生成以下输出 -

点击 DECREMENT 按钮 -

在上述范例中 -

我们创建了一个 input 字段,包含在一个拥有 type =“range, id =“RANGE1” ,name =“VOL” 的表单中 -

<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
<form>

然后我们创建了一个 DECREMENT 按钮,用户单击时将执行 stepDecrement() 方法 -

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

stepDecrement() 方法使用 getElementById() 方法通过向其传递 id “RANGE1” 来获取具有范围类型的输入字段,并在其上调用 stepDown() 方法,并提供 10 作为减小值。这将使滑块减小 10 -

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

更新于: 2019 年 8 月 22 日

77 次浏览

开始你的 职业

完成课程获得认证

开始
广告
© . All rights reserved.