클래스 속성은 CSS에서 해당 클래스 이름을 가진 요소에 대한 일부 작업을 수행하는 데 사용될 수 있습니다. 이번 글에서는 JavaScript를 사용하여 요소에 클래스를 추가하는 방법에 대해 설명합니다. ~ 안에 자바스크립트 , 요소에 클래스를 추가하는 몇 가지 접근 방식이 있습니다. 우리는 .className 재산이나 .추가하다() 특정 요소에 클래스 이름을 추가하는 방법입니다.

이제 요소에 클래스를 추가하는 방법에 대해 논의해 보겠습니다.

.className 속성 사용

그만큼 .className 속성은 요소의 클래스 이름을 설정합니다. 이 속성은 요소의 클래스 속성 값을 반환하는 데 사용할 수 있습니다. 이 속성을 사용하면 기존 클래스를 바꾸지 않고도 HTML 요소에 클래스를 추가할 수 있습니다.

여러 클래스를 추가하려면 다음과 같이 이름을 공백으로 구분해야 합니다. '클래스1 클래스2' .

요소에 대해 클래스가 이미 선언되어 있고 동일한 요소에 새 클래스 이름을 추가해야 하는 경우 새 클래스 이름을 쓰기 전에 공백을 삽입하여 선언해야 합니다. 그렇지 않으면 기존 클래스 이름을 덮어쓰게 됩니다. 다음과 같이 작성할 수 있습니다.

 document.getElementById('div1').className = ' newClass'; 

위 코드에서는 앞에 공백을 삽입했습니다. 새로운클래스 .

통사론

클래스 이름을 설정하거나 반환하기 위해 일반적으로 사용되는 이 속성의 구문은 다음과 같습니다.

클래스 이름을 설정하려면

 element.className = class 

클래스 이름을 반환하려면

 element.className 

사용 예 .className 속성은 다음과 같이 주어집니다.

예 - 클래스 이름 추가

이 예에서는 .className 추가하기 위한 속성 '을 위한' ID가 있는 단락 요소에 대한 클래스 'p1' . 클래스 이름을 사용하여 해당 단락에 CSS를 적용하고 있습니다. '을 위한' .

주어진 것을 클릭해야합니다 HTML 버튼 '클래스 추가' 효과를 보려면.

 add class name using JavaScript .para { font-size: 30px; background-color: yellow; color: blue; border: 2px dotted red; } <p id="p1"> Welcome to the javaTpoint.com </p> <p> Click the following button to see the effect. </p> Add Class function fun() { var a = document.getElementById(&apos;p1&apos;); a.classList.add(&apos;para&apos;); } 

산출

주어진 버튼을 클릭하면 출력은 다음과 같습니다.