数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会科学
时尚研究
法学研究HTML DOM 输入范围步长属性
HTML DOM 输入范围 step 属性用于设置或返回滑块控件 step 属性值。它指定滑块每次移动的距离。通过将 max 和 min 属性与 step 属性一起使用，我们可以定义一系列合法的值。
语法
以下是语法 −
设置 step 属性 −
rangeObject.step=number
此处，number 指定滑块控件的移动大小。其默认值为 1。
示例
让我们看一个关于输入范围 step 属性的示例 −
<!DOCTYPE html>
<html>
<body>
<h1>Input range step Property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Change the step property value of the above range control by clicking the below button</p>
<button type="button" onclick="changeStep()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeStep() {
document.getElementById("RANGE1").step ="30" ;
document.getElementById("Sample").innerHTML = "The step attribute value is now 30";
}
</script>
</body>
</html>输出
这将产生以下输出 −
单击 CHANGE 按钮时 −
在上面的示例中 −
我们创建了一个输入字段，包含在一个 type=“range”、id=“RANGE1”、name=“VOL” 的表单中。其 step 属性值默认设置为 1 −
<form> VOLUME <input type="range" id="RANGE1" name="VOL"> <form>
然后我们创建了一个 CHANGE 按钮，当用户单击它时，它将执行 changeStep() 方法 −
<button type="button" onclick="changeStep()">CHANGE</button>
changeStep() 方法使用 getElementById() 方法通过将 id “RANGE1” 传递给它来获取具有范围类型的输入字段。获取元素后，我们将它的 step 属性设置为 30。这将增加滑块一次移动的距离。由于最小值为 0，最大值为 100，因此滑块现在只移动到三个位置 −
function changeStep() {
document.getElementById("RANGE1").step ="30" ;
document.getElementById("Sample").innerHTML = "The step attribute value is now 30";
}
更新于: 22-Aug-2019
114 浏览量
广告