JavaScript - style property & class control

자바스크립트를 활용하여 여러 프로퍼티에 접근하여 스타일, 클래스 명, 클래스 추가 및 삭제에 대해 알아보자!

const today = document.querySelector('.today')

• 예시를 위해 today 변수에 today 클래스 명을 할당하였다.

 

1. style 프로퍼티

• 자바스크립트를 사용하여 style값을 수정할 수 있는데 그 방법에 대해서 알아보자

today.children[0].style.textDecoration = 'line-through'

• 변수.style.style값 = "값"의 형태로 작성해주면 된다.
• style값은 css와 선언하는 방식이 동일하다.
• 주의할 점은 css에서는 케밥 표기법을 사용하였지만 자바스크립트에서는 반드시 카멜 표기법으로 사용해야 한다.

 

2. className

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

• 이러한 방식으로 클래스 명을 변경할 수 있다.
• 하지만 클래스 명이 완전히 변경되는 방식이기 때문에 클래스 명을 추가할 수 있는 classList 방식이 더 효율적 일 수 있다.

 

3. classList add/remove/toggle

3.1 classList.add

today.classList.add('done') // done 클래스명 추가
today.classList.add('other','done') // other과 done 클래스명 추가

• 이러한 방법으로 여러 개의 클래스가 추가 가능하다.

 

3.2 classList.remove

today.classList.remove('done','other')

• add와 선언 구조가 동일하며 할당된 클래스를 제거할 수 있다.

 

3.3 classList.toggle

today.classList.toggle('done')

• toggle은 있으면 제거하고 없으면 추가하는 기능이다. 하지만 add와 remove와 같이 여러 개의 파라미터를 전달 할 수 없는 특징을 가지고 있다.

 

today.classList.toggle('done', i < 10)

• toggle은 클래스명 뿐만 아니라 조건식을 넣을 수 있는 특징 또한 지니고 있다.