Thuộc tính step của HTML DOM Input Number trả về và cho phép thay đổi giá trị thuộc tính step của trường nhập số trong tài liệu HTML.
Cú pháp
Cú pháp như sau:
Lấy giá trị step:
object.step
Thiết lập step:
object.step = “số"
Ví dụ
Dưới đây là ví dụ về thuộc tính step của HTML DOM Input Number:
<!DOCTYPE html> <html> <head> <style> html{ height:100%; } body{ text-align:center; color:#fff; background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat; height:100%; } p{ font-weight:700; font-size:1.1rem; } input{ display:block; width:35%; border:2px solid #fff; background-color:transparent; color:#fff; font-weight:bold; padding:8px; margin:1rem auto; } .btn{ background:#0197F6; border:none; height:2rem; border-radius:2px; width:35%; margin:2rem auto; display:block; color:#fff; outline:none; cursor:pointer; } .show{ font-size:1.5rem; color:#db133a; font-weight:bold; } </style> </head> <body> <h1>Demo thuộc tính step của DOM Input Number</h1> <p>Chào bạn, hãy nhập một số bất kỳ & sau đó thử tăng/giảm giá trị của nó</p> <input type="number" class="numberInput"> <button type="button" onclick="setStep()" class="btn">Đặt step = 5</button> <button type="button" onclick="getStep()" class="btn">Nhấn để hiển thị giá trị step</button> <div class="show"></div> <script> function setStep(){ var numberInput = document.querySelector(".numberInput"); numberInput.step="5"; } function getStep() { var numberInput = document.querySelector(".numberInput"); var showMsg = document.querySelector(".show"); showMsg.innerHTML = numberInput.step; } </script> </body> </html>
Kết quả
Đoạn mã trên sẽ cho kết quả như sau:
Nhập giá trị vào ô nhập số sau đó nhấn nút 「Đặt step = 5」 để thiết lập step=5.
Bây giờ hãy thử tăng/giảm giá trị của nó bằng phím mũi tên lên & mũi tên xuống.
Bây giờ nhấn vào 「Nhấn để hiển thị giá trị step」 để xem giá trị step hiện tại.
