資料結構
網路
關係型資料庫管理系統
作業系統
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 瀏覽量
廣告