HTML DOM 입력 범위 개체

<시간/>

HTML DOM 입력 범위 개체는 "범위" 유형의 요소와 연결됩니다. 각각 createElement() 및 getElementById() 메서드를 사용하여 유형 범위를 가진 입력 요소를 만들고 액세스할 수 있습니다.

속성

다음은 입력 범위 개체의 속성입니다 -

Sr.No	속성 및 설명
1	자동 완성 범위 컨트롤의 자동 완성 속성 값을 설정하거나 반환합니다.
2	자동 초점 페이지가 로드될 때 범위 슬라이더 컨트롤이 자동으로 포커스를 받아야 하는지 여부를 설정하거나 반환하려면
3	기본값 범위 슬라이더 컨트롤 기본값을 설정하거나 반환합니다.
4	비활성화됨 슬라이더 컨트롤이 비활성화되었는지 여부를 설정하거나 반환합니다.
5	양식 슬라이더 컨트롤이 포함된 양식의 참조를 반환하려면
6	목록 슬라이더 컨트롤이 포함된 데이터 목록에 대한 참조를 반환하려면
7	최대 슬라이더 컨트롤의 최대 속성 값을 설정하거나 반환합니다.
8	최소 슬라이더 컨트롤의 최소 속성 값을 설정하거나 반환합니다.
9	이름 슬라이더 컨트롤의 이름 속성 값을 설정하거나 반환합니다.
10	단계 슬라이더 컨트롤의 단계 속성 값을 설정하거나 반환합니다.
11	유형 슬라이더 컨트롤에 대한 양식 요소 유형을 반환합니다.
12	값 슬라이더 컨트롤의 값 속성 값을 설정하거나 반환합니다.

방법

다음은 암호 개체에 대한 방법입니다 -

Sr.No	방법 및 설명
1	스텝다운() 슬라이더 컨트롤 값을 주어진 숫자만큼 감소시키려면
2	스텝업() 주어진 숫자만큼 슬라이더 컨트롤 값을 증가시키려면.

예시

입력 범위 개체에 대한 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<head>
<script>
   function rangeCreate() {
      var R = document.createElement("INPUT");
      R.setAttribute("type", "range");
      document.body.appendChild(R);
}
</script>
</head>
<body>
<h1>Input range object</h1>
<p>Create an input field with type range by clicking the below button</p>
<button onclick="rangeCreate()">CREATE</button>
<br><br>
VOLUME:
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 입력 범위 개체

CREATE 버튼 클릭 시 -

HTML DOM 입력 범위 개체

위의 예에서 -

사용자가 클릭할 때 rangeCreate() 메서드를 실행하는 CREATE 버튼을 만들었습니다. −

<button onclick="rangeCreate()">CREATE</button>

rangeCreate() 메서드는 문서 객체의 createElement() 메서드를 사용하여 "INPUT"을 매개변수로 전달하여 요소를 생성합니다. 새로 생성된 입력 요소는 변수 R에 할당되고 setAttribute() 메서드를 사용하여 값 범위가 있는 유형 속성을 생성합니다.

setAttribute()는 속성을 생성한 다음 속성이 이전에 존재하지 않는 경우 값을 할당한다는 것을 기억하십시오. 마지막으로 문서 본문에서 appendChild() 메서드를 사용하여 본문의 자식으로 범위 유형의 입력 요소를 추가합니다. −

function createPASS() {
   var R = document.createElement("INPUT");
   R.setAttribute("type", "range");
   document.body.appendChild(R);
}