HTML | DOM 输入范围值属性

简介

在 HTML 中，输入范围值属性 (<input type="range">) 定义了一个滑块控件，允许用户通过拖动滑块来选择一个范围内的值。输入范围值属性还可以使用 JavaScript DOM 访问和更改其值。

HTML 中的输入范围值属性

下面是一个示例 HTML 技术使用 <input> 元素创建一个输入范围值属性：

<input type="range" id="myRange" name="myRange" min="0" max="100" value="50">

其中，type="range" 属性设置滑块控件，id 和 name 属性定义该控件的标识符，min 和 max 属性定义可选值的范围，value 属性定义控件初始位置的值。

使用 JavaScript DOM 操作输入范围值属性

通过 JavaScript，可以使用 DOM 访问和更改输入范围值属性的值。下面是一个示例 JavaScript 代码：

// 获取输入范围值属性
var range = document.getElementById("myRange");

// 获取输入范围值属性的值
var value = range.value;

// 更改输入范围值属性的值
range.value = 75;

可用的 DOM 方法和属性

以下是可用的 DOM 方法和属性，可用于操作输入范围值属性：

属性

• value - 获取或设置输入范围值属性的当前值。

• min - 获取或设置输入范围值属性允许的最小值。

• max - 获取或设置输入范围值属性允许的最大值。

• step - 获取或设置输入范围值属性增加或减少的步长值。

方法

• addEventListener() - 绑定事件处理程序。

• removeEventListener() - 移除事件处理程序。

• focus() - 让输入范围值属性获取焦点。

• blur() - 让输入范围值属性失去焦点。

• click() - 触发输入范围值属性的点击事件。

结论

输入范围值属性允许用户创建滑块控件，选择一个可选值范围内的值，通过 JavaScript DOM 访问和更改其值，使其成为创建各种应用程序的有用工具。