JavaScript를 사용하여 HTML 요소의 클래스 변경
- JavaScript에서 HTML 요소 선택
- JavaScript의 요소에 적용 가능한 모든 클래스 변경
- JavaScript의 요소에 추가 클래스 삽입
- JavaScript의 요소에서 클래스 삭제
- 클래스가 JavaScript의 요소에서 사용되었는지 확인
이 기사에서는 JavaScript 이벤트에 대한 응답으로 HTML 요소의 클래스를 변경하는 방법을 보여줍니다.
JavaScript에서 HTML 요소 선택
틀림없이 JavaScript에서 HTML 요소를 선택하는 가장 쉬운 방법은document.getElementById()를 사용하는 것입니다.
예를 들어, 클래스 ID가 Students 인 요소를 선택해야하는 경우 선택하는 방법은 다음과 같습니다.
document.getElementById('Students')
JavaScript의 요소에 적용 가능한 모든 클래스 변경
클래스 ID를 사용하여 요소를 선택한 후 위와 같이 클래스를 변경하거나 모든 클래스를 바꿀 수 있습니다. 아래와 같이 이전 클래스를 대체하려면.className속성을 사용하여 새 클래스를 설정해야합니다.
Document.getElementById('Fruits').classname = 'Veggies';
JavaScript의 요소에 추가 클래스 삽입
기존 클래스를 변경하지 않고 요소에 새 클래스를 추가 할 수도 있습니다. +=연산자를 사용하여 새 클래스를 추가하면됩니다.
예를 들면
Document.getElementById('Subjects').className += 'Physics';
Subjects 요소의 다른 클래스에 Physics라는 추가 클래스를 추가합니다.
JavaScript의 요소에서 클래스 삭제
다른 클래스에 영향을주지 않고 요소에서 단일 클래스를 삭제하는 것은 약간 더 복잡합니다. .className.replace를 다음 정규식과 함께 사용해야합니다.
?:^|\s)RemoveThis(?!\S)/g
?:^|\s는 문자열의 시작 및 / 또는 사용 된 단일 공백 문자를 캡처합니다.RemoveThis는 제거 할 클래스의 이름입니다.(?!\S)는RemoveThis가 전체 클래스 이름인지 확인하고 끝에 공백이 아닌 문자가 있는지 확인합니다. 즉, 정규식이 문자열의 끝에 배치되도록합니다.g는 클래스가 추가 된 모든 경우에 필요에 따라 replace 명령이 적용되도록하는 플래그입니다.
아래 예를 참조하십시오.
document.getElementById('ElementOne').className =
document.getElementById('ElementOne')
.className.replace(/(?:^|\s)RemoveThis(?!\S)/g, '')
클래스가 JavaScript의 요소에서 사용되었는지 확인
클래스가 특정 요소에 적용되었는지 확인하려면 위의 정규식을 사용할 수 있습니다. 이것은if();를 사용하는 것이 가장 좋습니다. 결과를 제공하는 진술. 예를 들면 :
if (document.getElementById('ElementOne')
.className.match(/(?:^|\s)ClassOne(?!\S)/))
print('Class has been used.')
체크가 긍정적 인 경우 출력은Class has been used가되고, 대체 조치 또는 출력이else문으로 정의되지 않는 한 부정적이면 출력이 없습니다.
HTML 이벤트 속성에 JavaScript 코드를 직접 작성하는 것은 권장되지 않습니다. 응용 프로그램을 실행하고 속도를 늦출 수 있습니다. 대신,onclick속성에서 해당 함수를 호출 한 다음 이벤트를 HTML 코드에서 JavaScript로 이동하여 함수에 JavaScript를 작성할 수 있습니다. .addEventListener()속성을 사용하여이를 수행 할 수 있습니다.