HTML DOM Input Range 对象
HTML DOM Input Range 对象
HTML DOM Input Range 对象是JavaScript中用于访问和控制HTML input 元素[type=“range”]的一个对象。它提供了一些属性和方法，使得开发者可以通过编程的方式操作滑块组件。
Range 对象属性
1. value
获取或设置滑块的值。当滑块的值改变时，会触发 onchange 事件。
document.getElementById("myRange").value = "30";
2. min
获取或设置滑块的最小值。
document.getElementById("myRange").min = "0";
3. max
获取或设置滑块的最大值。
document.getElementById("myRange").max = "100";
4. defaultValue
获取或设置滑块的默认值。
document.getElementById("myRange").defaultValue = "50";
Range 对象方法
1. stepUp()
将滑块的值增加指定的步长。默认步长为1。
document.getElementById("myRange").stepUp(2);
2. stepDown()
将滑块的值减少指定的步长。默认步长为1。
document.getElementById("myRange").stepDown();
Range 对象事件
1. onchange
当滑块的值改变时触发。
document.getElementById("myRange").onchange = function() {
alert("The value has been updated!");
};
2. oninput
当滑块的值被用户修改时触发。
document.getElementById("myRange").oninput = function() {
alert("The value has been modified!");
};
示例
<!DOCTYPE html>
<html>
<body>
<input type="range" id="myRange" value="50" min="0" max="100">
<p>Value: <span id="demo"></span></p>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
</body>
</html>
这个例子展示了如何使用 Range 对象设置滑块的最小值、最大值、默认值、当前值以及响应用户操作时如何更新当前值的显示。
以上就是HTML DOM Input Range 对象的简要介绍，希望这篇文档能帮助你更好地理解和运用这个对象。