자바스크립트 class 추가하기

자바스크립트에서 class를 추가해봅시다.

 

---

1. 자바스크립트 class 추가

element.classList.add("myStyle");

클래스 추가

추가하는 내용이니

add가 들어가는군요.

 

-

 

요소

element. 즉, 요소란

html에서 어디에 class를 넣을 것인가

정해주는 부분입니다.

 

만약 특정 div 태그에 class를 넣는다면

그 div 태그를 선택하면 됩니다.

 

선택하는 방법은

아래를 참고해주세요.

 

 

자바스크립트로 요소 선택하기

 

 

-

 

class 관련

classList는 class 관련 명령어라고 여겨주세요.

세부적으로 너무 파고들 필요는 없습니다.

어렵기도 하고요.

 

아무튼 class 관련이구나

하고 생각해주세요.

 

-

class 추가

가장 중요한 부분이 아닐까 합니다.

add를 이용해

class를 추가해줍니다.

 

( )괄호 안쪽에

넣고자 하는 class 이름을 넣으면

class 추가 완료입니다.

 

주의점은

" "(따옴표) 잊지 말아 주시고요,

.(온점) 빼먹지 말아 주세요.

 

-

 

---

2. W3Schools

https://www.w3schools.com/jsreF/prop_element_classlist.asp

HTML DOM Element classList Property

예시 확인

w3schools의 예시를 보며

실제 적용 방법을 확인해봅시다.

 

-

 

코드	기능
element.classList.add("myStyle");	class 추가
element.classList.remove("myStyle");	class 삭제
element.classList.toggle("myStyle");	toggle 추가

classList 활용

class 추가 외에도

class 삭제, toggle 추가 기능이 있으니

함께 살펴보세요.

 

 

 

---

이상으로 자바스크립트에서 class 추가 방법을 알아보았습니다.

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

 

 

[같이 보면 좋은 포스팅]

[coding/JavaScript] - 자바스크립트 css 추가하기

자바스크립트 css 추가하기

[coding/개발 팁] - 인프런 인강 사이트 추천 (무료 강의 포함)

인프런 인강 사이트 추천 (무료 강의 포함)

 

그럼 이만.

총총.