요소에 클래스 속성을 추가하면 개발자가 웹 페이지에서 동적 사용자 경험을 만드는 데 도움이 됩니다. 클래스 속성이 요소에 추가되면 선택한 요소는 해당 클래스 이름과 관련된 스타일을 사용합니다.
버튼을 클릭하여 사용자를 생각해 보십시오. 버튼을 클릭하면 CSS 스타일시트에 따라 웹페이지 섹션이 변경되기를 원합니다. 이 스타일과 관련된 클래스 이름을 요소에 할당하여 버튼을 클릭한 후 모양을 변경할 수 있습니다.
대화형 경험을 만드는 것은 모든 프런트 엔드 프로그래밍에서 중요합니다. 이 가이드에서는 일반 JavaScript에서 선택한 요소에 클래스 이름을 추가하는 두 가지 방법을 살펴보겠습니다. 결국 이 도구를 프로젝트에서 사용할 수 있게 됩니다.
자바스크립트 사용 방법 클래스 추가
자바스크립트에서 클래스 이름을 추가하는 방법은 두 가지가 있습니다. 먼저 원하는 HTML 요소를 선택합니다. 그런 다음 className 또는 add() 속성을 사용하여 요소에 클래스 이름을 추가할 수 있는 옵션이 있습니다. 구문을 살펴보고 다음 섹션에서 사용할 것입니다.
여기에서는 간단한 JavaScript를 사용하고 있음을 기억하십시오. 라이브러리가 필요하지 않습니다. JavaScript를 정기적으로 사용하기 때문에 위의 논리를 함수로 래핑하고 해당 함수를 이벤트 핸들러에 전달하는 것이 일반적입니다. 이렇게 하면 클래스 이름을 추가하는 기능이 특정 이벤트가 발생한 후에만 발생합니다.
HTML 요소의 경우 클래스 이름이 여러 개일 수 있습니다. 이것은 이미 다른 클래스 이름이나 ID가 있는 요소에 클래스 이름을 추가할 수 있다는 것을 기억하는 데 도움이 됩니다. 명심해야 할 것은 스타일이 프로젝트의 클래스 이름과 연결되어 있고 스타일을 적용하려는 요소에 이름을 추가한다는 것입니다.
