웹페이지나 웹사이트를 디자인하는 단계에서 일부 업데이트로 인해 일부 특정 요소에 더 이상 액세스할 필요가 없는 특정 상황이 있습니다. 또한 html의 특정 요소에 둘 이상의 클래스를 할당해야 하는 경우. 이러한 시나리오에서 JavaScript에서 HTML 요소의 클래스를 변경하는 것은 이러한 상황을 수용하는 데 큰 도움이 됩니다.
이 블로그는 JavaScript에서 HTML 요소의 클래스를 변경할 때 고려해야 할 접근 방식을 보여줍니다.
JavaScript로 HTML 요소의 클래스를 변경하는 방법은 무엇입니까?
JavaScript를 사용하여 HTML 요소의 클래스를 변경하려면 다음 접근 방식을 적용할 수 있습니다.
-
- ' 클래스 이름 ' 재산.
- ' 클래스 목록 ' 재산.
접근 방식 1: className 속성을 사용하여 JavaScript로 HTML 요소의 클래스 변경
이 접근 방식은 요소와 연결된 생성된 클래스에 액세스하고 다른 클래스를 할당하여 적용할 수 있습니다.
다음 예는 명시된 개념을 보여줍니다.
예시
아래 주어진 코드에서 ' <본체> ' 태그에서 ' ' 태그. 그런 다음 기본 ' 수업 '는 나중에 코드에서 변경됩니다. 또한 ' ID ' 및 첨부된 ' 클릭 ' 클래스() 함수를 호출하는 이벤트.
코드의 뒷부분에서 ' ” 태그를 사용하여 클래스 변환 시 DOM에 표시합니다.
HTML 코드:
< 신체 스타일 = '텍스트 정렬: 가운데;' >< h2 > 요소 변경 님의 클래스 이름
이전 클래스 이름: 기본 클래스
JS 코드에서 ' 수업() '. 여기에서 '를 사용하여 id로 기본 클래스에 액세스합니다. 문서.getElementById() ' 방법. ' 클래스 이름 ' 속성은 생성된 클래스를 ' 새로운 클래스 '.
마지막으로 ' 내부텍스트 ' 속성은 변경된 클래스와 함께 다음 메시지를 표시합니다.
JS 코드:
기능 수업 ( ) {문서.getElementById ( '마이버튼' ) .className = '새로운 클래스' ;
var 액세스 = document.getElementById ( '마이버튼' ) .클래스 이름;
문서.getElementById ( '머리' ) .innerHTML = '새 클래스 이름: ' + 액세스;
}
산출
위의 출력에서 ' 수업 ” DOM에서 버튼을 클릭하면 오른쪽에 표시됩니다.
접근 방식 2: classList 속성을 사용하여 JavaScript로 HTML 요소의 클래스 변경
이 특정 접근 방식을 구현하여 지정된 클래스를 제거하고 새 클래스를 할당하여 변경할 수 있습니다.
예시
먼저, 제목을 포함하고 지정된 기능을 호출하는 할당된 클래스, ID 및 첨부된 onclick 이벤트로 버튼을 생성하기 위해 위에서 설명한 방법을 반복합니다. 다음으로 ' ” 태그를 사용하여 버튼 클릭 시 변경된 클래스를 사용자에게 알립니다.
HTML 코드
< 신체 스타일 = '텍스트 정렬: 가운데;' >< h2 > 요소 클래스 변경 ! h2 >
< 단추 수업 = '웹사이트' 클릭 = '수업()' ID = '변화' > 클릭 해주세요 단추 >
< h3 ID = '머리' 스타일 = '배경색: 밝은 회색;' > 이전 클래스 이름: 웹사이트 h3 >
신체 >
이제 ' 수업() '. 그 정의에서 ' 클래스 목록 '와 함께 속성 ' 제거하다() '라는 이름의 액세스된 클래스를 생략하는 '메서드' 웹사이트 '는 생성된 버튼에 해당합니다.
다음 단계에서 ' 논의된 속성을 사용하여 동일한 클래스에 새 클래스를 할당합니다 추가하다() ' 방법. 마지막으로 이전 접근 방식에서 설명한 대로 변경된 클래스를 표시합니다.
JS 코드
기능 수업 ( ) {문서.getElementById ( '변화' ) .classList.제거 ( '웹사이트' )
문서.getElementById ( '변화' ) .classList.추가 ( '리눅스' ) ;
var 액세스 = document.getElementById ( '변화' ) .classList;
문서.getElementById ( '머리' ) .innerHTML = '새 클래스 이름: ' + 액세스;
}
산출
이 글은 JavaScript를 사용하여 HTML 요소의 클래스를 변경하는 개념을 정리하기 위한 것입니다.
결론
' 클래스 이름 ' 그리고 ' 클래스 목록 ' 속성을 사용하여 HTML 요소의 클래스를 변경할 수 있습니다. className 속성은 코드 복잡성이 적기 때문에 classList 속성과 비교하여 원하는 요구 사항을 수행하는 데 더 빠른 접근 방식으로 이어졌습니다. 반면에 classList 속성은 두 가지 추가 메서드를 사용하여 기본 클래스를 변경했습니다. 이 기사에서는 JavaScript로 HTML 요소의 클래스를 변경하는 방법을 설명했습니다.