JavaScript classList는 요소의 CSS(Cascading Style Sheet) 클래스 스타일을 지정할 수 있는 JavaScript의 DOM 속성입니다. JavaScript classList는 CSS 클래스의 이름을 반환하는 읽기 전용 속성입니다. style 및 className을 포함하는 JavaScript의 다른 속성과 관련하여 JavaScript의 속성입니다. style 속성은 CSS 클래스 요소의 색상이나 기타 스타일을 반환하고, className은 CSS 파일에 사용된 클래스의 이름을 반환하는 데 사용됩니다. 그러나 className 및 classList 속성은 CSS 파일에서 사용한 클래스 이름을 다른 방식으로 반환합니다. className 속성은 클래스 이름을 문자열 형식으로 반환하는 반면, classList 속성은 자바스크립트 배열 형식으로 클래스 이름을 반환합니다.
여기에서는 JavaScript classList에 대해 간략하게 설명하고 해당 메서드와 실제 구현에 대해서도 논의합니다.
JavaScript classList 속성의 예
다음은 요소의 클래스 값을 가져오는 JavaScript classList 속성의 예입니다.
<h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById('btn'); alert(e.classList); } 위 코드의 출력은 다음과 같습니다.
JavaScript classList 속성
classList 속성은 클래스 요소의 값을 나타내는 데 사용됩니다. DOM토큰목록 물체. 이는 읽기 전용 속성이지만 프로그램에 사용되는 클래스를 조작하여 해당 값을 수정할 수 있습니다. JavaScript classList 속성은 클래스 요소에 대해 다양한 작업을 수행할 수 있는 다음 메서드로 구성됩니다.
JavaScript classList에서 사용되는 메소드 중 일부는 다음과 같습니다.
int를 문자로
하나씩 논의해보겠습니다.
클래스리스트.추가()
CSS 요소에 하나 이상의 클래스를 추가하는 데 사용되는 함수입니다.
예:
int를 double java로 변환
아래 예제에서는 classList.add() 메서드를 사용하여 클래스를 추가하는 방법을 보여줍니다.
.myClass {background: red;} <h3> Click on the button and add the class</h3> <br> function getClass() { var e = document.getElementById('Btn'); e.classList.add('myClass'); } 코드에서 사용자가 버튼을 클릭하면 새 클래스가 기존 클래스와 함께 추가됩니다. 버튼을 클릭한 후의 출력은 다음과 같습니다.
클래스리스트.제거()
Remove() 함수는 요소에서 기존 클래스를 제거하는 데 사용됩니다.
아래 예에서는 classlist.remove() 메서드를 사용하여 하나 이상의 클래스를 제거하는 방법을 보여줍니다.
.myClass {background: red;} <h3> Click on the button and remove the class </h3> <br> function getClass() { var e = document.getElementById('Btn'); e.classList.remove('myClass'); } 위 코드에서 사용자가 버튼을 클릭하면 지정된 특정 클래스가 기존 CSS 클래스에서 제거됩니다. 버튼을 클릭한 후의 출력은 다음과 같습니다.
클래스리스트.토글()
토글() 버튼은 클래스를 요소로 전환하는 데 사용됩니다. 이는 새 클래스를 추가하거나 기존 클래스를 제거하는 것을 의미합니다.
다음은 클래스를 추가하거나 제거하기 위해 전환() 메서드를 사용하는 방법을 이해하는 데 도움이 되는 예입니다.
마지막 커밋 git 삭제
예:
.myClass1{background: red;} .myClass2 {background: blue;} <h3> Click on the button to add or remove the class</h3> <br> function get_toggle() { var e = document.getElementById('Btn'); e.classList.toggle('myClass2'); } 코드에서 사용자가 버튼을 클릭하면 클래스가 CSS 클래스에 추가되거나 제거됩니다. 버튼을 클릭한 후의 출력은 다음과 같습니다.
클래스리스트.포함()
Contains() 메소드는 CSS 클래스에 지정된 클래스가 존재하는지 확인하고 이에 대해 Boolean 값을 true 또는 false로 반환하는 데 사용됩니다.
다음은 클래스가 존재하는지 또는 포함() 메소드를 사용하지 않는지 검색하는 방법을 보여주는 예입니다.
예:
function getClass() { var e = document.getElementById('Btn'); document.write(e.classList.contains('myClass')+' <br>'+'myclass is the name of the class'); } 위 코드에서는 사용자가 버튼을 클릭하면 CSS 클래스에 지정된 클래스가 있는지 확인하는 것을 볼 수 있습니다. 존재하는 경우 부울 값이 true로 반환됩니다. 그렇지 않으면 false를 반환합니다. 버튼을 클릭한 후 위 코드의 출력은 다음과 같습니다.
클래스리스트.교체()
교체() 메서드는 기존 클래스를 새 클래스로 바꾸는 데 사용됩니다. 클래스가 요소에서 제거되는 것은 아니지만 기존 클래스의 속성이 새 클래스의 속성으로 대체된다는 의미입니다.
다음은 기존 클래스를 새 클래스로 대체하는 방법을 이해하는 예입니다.
지도 자바 반복자
예:
.myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById('Btn'); e.classList.replace('myClass1', 'myClass2'); } 위 코드에서 사용자가 버튼을 클릭하면 기존 클래스 속성이 새 클래스 속성으로 대체됩니다. 버튼을 클릭한 후의 출력은 다음과 같습니다.
클래스목록.항목()
item() 함수는 지정된 인덱스 값에 존재하는 클래스의 이름을 반환하는 데 사용됩니다.
다음은 item() 메서드를 사용하여 값을 반환하는 방법을 이해하는 데 도움이 되는 예입니다.
예:
<h3> Click on the button to get the specified index value</h3><br> function get_Class() { var e = document.getElementById('Btn'); alert(e.classList.item(2)); } 코드에서 사용자가 버튼을 클릭하면 지정된 인덱스에 있는 클래스가 표시됩니다. 버튼을 클릭하면 아래와 같이 지정된 인덱스 클래스 값을 얻습니다.
이것은 classList DOM 객체의 메소드 중 일부와 classList에 관한 모든 것입니다.