요소에 클래스 속성을 추가하면 개발자가 웹 페이지에서 동적 사용자 환경을 만드는 데 도움이 됩니다. 클래스 속성이 요소에 추가되면 선택한 요소는 해당 클래스 이름과 관련된 스타일을 가정합니다.
사용자가 버튼을 클릭한다고 생각해 보십시오. 버튼을 클릭하면 웹 페이지의 섹션이 CSS 스타일시트에 따라 변경되기를 원합니다. 버튼을 클릭한 후 모양을 변경하기 위해 해당 스타일과 관련된 클래스 이름을 요소에 할당할 수 있습니다.
인터랙티브한 경험을 만드는 것은 모든 프런트 엔드 프로그래밍에서 중요합니다. 이 가이드에서는 일반 JavaScript에서 선택한 요소에 클래스 이름을 추가하는 두 가지 방법을 탐색합니다. 결국 자신의 프로젝트에서 이 도구를 사용할 수 있게 될 것입니다.
자바스크립트 클래스 추가 사용 방법
JavaScript에서 클래스 이름을 추가하는 것은 몇 가지 방법으로 수행할 수 있습니다. 먼저 원하는 HTML 요소를 선택합니다. 그런 다음 className 속성이나 add()를 사용할 수 있습니다. 요소에 클래스 이름을 추가하는 메서드입니다. 구문을 살펴보고 다음 섹션에서 사용할 것입니다.
여기에서는 일반 JavaScript를 사용하고 있음을 기억하십시오. 라이브러리는 필요하지 않습니다. 우리는 일반 JavaScript를 사용하기 때문에 일반적인 방법은 위의 논리를 함수 내부에 래핑하고 해당 함수를 이벤트 핸들러에 전달하는 것입니다. 이렇게 하면 특정 이벤트가 발생한 후에만 클래스 이름을 추가하는 기능이 실행됩니다.
HTML 요소에 관한 한 여러 클래스 이름을 가질 수 있습니다. 이것은 이미 다른 클래스 이름이나 ID가 있는 요소에 클래스 이름을 추가할 수 있기 때문에 기억하는 데 유용합니다. 우리가 염두에 두어야 할 것은 스타일이 우리 프로젝트의 어떤 클래스 이름과 연관되어 있고 스타일을 지정하려는 요소에 이름을 추가한다는 것입니다.
클래스 이름을 추가하기 위한 JavaScript 구문
요소에 클래스 이름을 추가하는 두 가지 방법을 살펴보겠습니다. 위 섹션에서 함수 내부에 클래스를 추가하는 논리를 래핑하는 것이 일반적인 관행임을 기억하십시오. 함수가 빌드되면 onClick HTML 속성 내에서 호출할 수 있습니다.
일반 JavaScript를 사용하여 클래스 이름을 추가하는 첫 번째 방법은 className 속성을 살펴보는 것입니다. 여기서 논리는 요소를 선택한 다음 선택한 요소에서 .className을 호출하는 것입니다. 그런 다음 클래스 이름을 요소에 연결할 수 있습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
HTML부터 시작하겠습니다.
<div id="div"> Hello World </div> <button> Add Class </button>
여기에 ID가 "div"인
.background {
background-color: blue;
color: white;
} CSS 파일에는 "background" 클래스가 있습니다. 여기에서는 파란색 배경색으로 스타일이 지정되고 텍스트는 흰색이 됩니다. id가 "div"인
JavaScript는 다음과 같이 함수에서
const addClass = () => {
const element = document.getElementById('div');
element.className += "background"
} addClass라는 함수는 "div"라는 ID로
우리는 아직 완전히 끝나지 않았습니다! 우리는 여전히 어딘가에서 addClass 함수를 호출해야 합니다. 버튼을 클릭한 후
<div id="div"> Hello World </div> <button onClick="addClass()"> Add Class </button>
JavaScript onClick 메서드를 사용하여 버튼을 클릭한 후 함수를 호출할 수 있습니다. 버튼을 클릭하여 테스트해 보겠습니다.
방금 일어난 일을 검토하기 위해 CSS 파일에 스타일 지정과 관련된 클래스 이름 "background"를 추가했습니다. 요소를 찾고 클래스 이름을 추가하는 JavaScript 함수를 작성한 후 버튼을 클릭하면 클래스 스타일이
자바스크립트 add() 메소드
위와 같은 예를 사용하여 클래스 이름을 추가하는 다른 방법을 살펴보겠습니다. 여기에는 JavaScript add() 사용이 포함됩니다. 방법. 위의 예와 달리 classList 속성을 사용하여 add()를 호출합니다. .
addClass() 기능은 이제 다음과 같습니다.
const addClass = () => {
const element = document.getElementById('div');
element.classList.add("background")
} 우리는 여전히 id로
add() 방법. add()에 "background"라는 클래스 이름을 전달합니다. 인수로. 이제
두 가지 다른 방법으로 코딩하여 동일한 결과를 얻습니다. 코드에서 구현할 방법은 사용자의 선택이지만 두 번째 방법이 모범 사례로 더 널리 받아들여지고 있습니다. add() 사용 연결을 사용하는 것보다 오류가 덜 발생하기 때문에 모범 사례로 간주됩니다.
결론
이 가이드에서는 요소에 클래스 이름을 추가하는 방법을 배웠습니다. 이것은 CSS 파일에 스타일이 지정된 클래스가 있을 때 유용합니다. 특정 HTML 요소에 클래스 이름을 추가하면 해당 요소는 CSS 파일에 있는 스타일을 상속합니다.
페이지에서 요소가 표시되는 방식을 동적으로 변경하여 사용자에게 앱에 대한 대화형 경험을 제공할 수 있습니다. 대화형 응용 프로그램을 작성할 때 사용자에게 자연스럽고 매력적으로 느껴집니다. 그것은 그들이 우리 앱을 더 탐색하기 위해 계속 돌아올 것입니다.