JS] 클래스 추가, 삭제, 토글/Structure, Style, Behaviour

Structure : HTML

Style : CSS

Behaviour : Javascript

 

 

 

 

클래스 추가  .add(  ) 

1. 버튼 element에 클래스 추가하기 

button element에 클라스 리스트로  invisible이라는 클라스 추가한다.

 

 

2. 추가된 invisible 클래스에 효과넣기

css

콘솔 element에서 확인

 

 

 

 

 

 

클래스 삭제  .remove( )

3. 클래스 삭제하기 

 

 

 

 

클래스 토글  .toggle( )

토글 계속 복붙하면 버튼 생겼다 없어졌다함

 

 

이 방법으로 하면 디버깅하기가 매우 쉬어진다. 

기본으로 정해 놓은 스타일을 변경하고 싶으면 stylesheet로 가서 고치고

behaving을 변경하고 싶으면 자바스크립트로 가서 고치면 된다.