스타일(css style)다루기

두가지의 방법 

1. 스타일 프로퍼티(style property)를 사용해서  요소를 직접 수정

today.children[0].style.textDecoration  = 'line-through'; 
today.children[0].style.backgroundColor = '#DDDDDD'; 
today.children[2].style.textDecoration  = 'line-through'; 
today.children[2].style.backgroundColor = '#DDDDDD';

문제점?!

스타일태그에 직접 적용되기 때문에 style우선순위가 생기기도 하고 여러코드에 적용할때는 

비슷한 코드를 적용해서 불필요하게 된다

2. css파일을 만들어 원하는 스타일의 클래스를 만들어놓고 JS로 클래스 속성을  다루기

두 가지의 방법 

a) elem.className

- 클래스(Class) 속성값 자체가 변경이 됨 => item 이름의 클래스가 사라지고 done클라스개 생김

- 클래스 속성 값을 통째로 바꿀때는 className을 사용 

today.children[1].className = 'done';

b) elem.classList

- class속성값를 유사배열로 다루는 기법 

- class속성값을 하나씩 다룰 수 있고 add, remove, toggle이라는 메서들을 사용할 수 있다 

- 클래스의 부분 값을 바꿀때는 classList를 사용 

// add 메서드사용
const item = tomorrow.children[1]; 
item.classList.add('done', 'other');

 

// remove 메서드 사용
const item = tomorrow.children[1]; 
item.classList.add('done', 'other'); 
item.classList.remove('done', 'other');

// toggle메서드 사용
const item = tomorrow.children[1];  
item.classList.toggle('done');