이 매뉴얼에서는 JavaScript에서 활성 클래스를 추가하는 절차를 설명합니다.
JavaScript에서 활성 클래스를 추가하는 방법은 무엇입니까?
활성 클래스를 추가하려면 다음 방법을 사용합니다.
첫 번째 방법으로 가자!
방법 1: classList.add() 메서드와 함께 document.getElementById()를 사용하여 JavaScript에서 활성 클래스 추가
자바스크립트에서 ' 문서.getElementById() ” 메소드는 id로 특정 요소에 액세스하는 데 사용됩니다. 그러나 클래스가 아닌 ID를 기반으로 요소만 선택합니다. '와 함께 사용할 수 있습니다. classList.add() ” JavaScript에서 활성 클래스를 추가하는 방법입니다.
예를 들어 이 방법을 살펴보겠습니다.
예시
HTML 파일에서 ' ” 태그에 텍스트가 포함된 경우 해당 id를 “ txt '를 추가하고 ' 클릭 '를 트리거하는 ' 이벤트 ' 활성화() ' 기능.
태그 내에태그를 추가합니다.
< 피 아이디 = 'txt' 클릭 = '활성화()' > 여기를 탭하세요 피 >JavaScript 파일에서는 document.getElementbyId() 메서드에서 해당 id를 사용하여 단락 요소에 먼저 액세스하는 방식으로 activate() 함수를 정의합니다. 그런 다음 스타일 지정을 위해 CSS 클래스를 클래스 목록에 추가합니다.
기능 활성화 ( ) {
~이있다 = 문서. getElementById ( 'txt' ) ;
ㅏ. 클래스 목록 . 추가하다 ( '뉴클래스' ) ;
}
CSS 파일에서 ' 뉴클래스 '를 할당하고 ' 배경색 ' 속성 값 ' 주황색 ':
. 뉴클래스 {배경 - 색깔 : 주황색 ;
}
결과적으로 단락 요소를 클릭하면 추가된 배경 속성이 해당 요소에 적용됩니다.
document.querySelector()를 사용하여 활성 클래스를 추가하는 다음 메서드를 살펴보겠습니다.
방법 2: classList.add() 메서드와 함께 document.querySelector()를 사용하여 JavaScript에서 활성 클래스 추가
자바스크립트에서 ' document.querySelector() ' 메서드는 코드에서 첫 번째 요소를 가져오는 데 사용됩니다. querySelector() 메서드 내에서 클래스와 ID를 모두 지정할 수 있습니다. '와 함께 사용할 수 있습니다. classList.add() ” JavaScript에서 활성 클래스를 추가하는 방법입니다.
예시
이제 ' document.querySelector() ' 아이디 ' #txt '를 눌러 단락 요소를 선택합니다. 다시 classList.add() 메서드를 사용하여 활성 ' 뉴클래스 ':
기능 활성화 ( ) {~이있다 = 문서. 쿼리 선택기 ( '#txt' ) ;
ㅏ. 클래스 목록 . 추가하다 ( '뉴클래스' ) ;
}
산출
JavaScript에서 활성 클래스를 추가하는 가장 간단한 두 가지 방법을 배웠습니다.
결론
활성 클래스를 추가하려면 ' getElementById() ' 또는 ' 쿼리 선택기() ' classList.add() 메서드를 사용합니다. 언급된 두 메서드는 먼저 ID별로 요소를 가져온 다음 스타일 지정에 사용할 수 있는 요소에 할당된 새 클래스 이름인 classList.add() 메서드를 사용합니다. 이 게시물은 JavaScript에서 활성 클래스를 추가하는 절차에 대해 설명했습니다.