Thuộc tính bước số đầu vào HTML DOM trả về và sửa đổi giá trị của thuộc tính bước của trường số đầu vào trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Quay lại bước
object.step
-
Bước sửa đổi
object.step = “number”
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính bước đầu vào HTML DOM -
<!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>DOM Input number step property Demo</h1>
<p>Hi, Enter any number & then try to increment/decrement its value</p>
<input type="number" class="numberInput">
<button type="button" onclick="setStep()" class="btn">Set step to 5</button>
<button type="button" onclick="getStep()" class="btn">Click me to show step value</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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhập giá trị vào đầu vào số, sau đó nhấp vào “ Đặt bước thành 5 ”Để đặt bước =5.
Bây giờ, hãy thử tăng / giảm giá trị của nó bằng cách sử dụng up & xuống chìa khóa.
Bây giờ hãy nhấp vào “Nhấp vào tôi để hiển thị giá trị bước” để xem giá trị bước hiện tại.
