스타일 다루기

방법1. style 프로퍼티 활용

---

// 스타일 다루기
const today = documnet.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');

// style 프로퍼티
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';

1. text-decoration --> textDecoration
   • 여러 단어를 이어서 만든 속성은 카멜 표기법을 사용해야 한다.
2. 실행 결과, 태그의 style 속성에 작성한 스타일이 추가된 것을 확인할 수 있다.
   • 태그에 직접적으로 값이 적용되어, 스타일 우선순위가 높아지거나 같은 스타일을 다른 여러 태그에 적용해야 될 때 비슷한 코드를 불필요하게 많이 작성해야 하는 문제가 발생한다.
   • 따라서 태그의 클래스를 변경하는 것이 조금 더 권장되는 방식이다.

 

 

방법2. className 프로퍼티 활용

---

// 스타일 다루기
const today = documnet.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');

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

// style.css 파일

.done {
  opacity: 0.5;
  text-decoration: line-through;
}

1. done 클래스에 미리 작성해둔 스타일이 입혀진다.
   • 그러나 className 프로퍼티로 값을 변경하면 클래스 속성값 전체가 바뀌게 된다.
   • 즉 원래 있던 클래스가 item 이었다면, 적용 후에는 done으로 변경된 것을 확인할 수 있다.
   • 상황에 따라 원래 있던 item 클래스를 그대로 두고 done 클래스를 추가하고 싶을 수도 있을 것이다.

 

 

방법3. classList 프로퍼티 활용

---

// 스타일 다루기
const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');

// elem.classList: add, remove, toggle
const item = tomorrow.children[1]; // 예매
item.classList.add('done');
item.classList.remove('done');
item.classList.toggle('done');

1. classList는 클래스 속성값을 유사 배열로 다루는 프로퍼티이다.
   • classList 활용시 클래스 속성을 하나씩 다룰 수 있고, 클래스를 좀 더 편하게 다룰 수 있는 add, remove, toggle 메소드도 활용할 수 있다.
   • add: 클래스 추가, remove: 클래스 삭제, toggle: 있으면 제거하고 없으면 추가