스타일 다루기

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

 

style 프로퍼티

 Javascript에서 스타일 프로퍼티는 카멜 표기법을 사용한다. ex) textDecoration, backgroundColor 등

스타일 프로퍼티를 사용하면 해당 태그에 스타일 속성이 직접적으로 추가되기 때문에 스타일 우선순위가 높아지며 같은 스타일을 여러 태그에 적용할 때는 비슷한 코드를 많이 작성해야하는 단점이 있다. 따라서, 일반적으로 자바스크립트에서 스타일을 다룰 때

스타일 프로퍼티를 사용하는 것 보다 class 속성을 변경하는 방식이 더 권장되는 방법이다.

// 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';

 

class로 스타일 다루기

1) element.className 프로퍼티

 done 이라는 클래스 스타일을 미리 만든 후

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

 className 프로퍼티를 활용해서 done 클래스의 스타일을 입히는 것이다.

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

다만, className 프로퍼티를 이용하면 class 속성값 전체가 바뀌게 된다. 

 

 

2) element.classList 프로퍼티 : add, remove, toggle

 상황에 따라서는 원래 있던 클래스를 그대로 두고 done 클래스를 추가하는 것이 더 효율적이기 때문에 classList 프로퍼티를 사용한다. classList는 클래스 속성 값을 유사배열로 다루는 프로퍼티이다. classList를 활용하면 클래스를 하나씩 다룰 수 있을 뿐만 아니라 클래스를 편하게 다룰 수 있는 add, remove, toggle 메서드를 사용할 수 있다.

• add : 클래스 추가, 여러개의 클래스를 쉼표로 구분해 추가 가능, 중복해서 추가해도 하나만 적용된다.
• remove : 클래스 제거, 여러개의 클래스를 쉼표로 구분해 제거 가능
• toggle : 클래스가 존재하면 제거하고, 클래스가 없으면 추가하는 기능, 토글은 클래스 하나만 다룬다.

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