# 4.클래스조작

javascript,

partial

# 목차

1. classList
1. 1.1. toggle() : 클래스 추가+삭제
  1. 1.1.1. 기본문법
  2. 1.1.2. 예제
2. 1.2. add() : 클래스 추가
  1. 1.2.1. 기본문법
  2. 1.2.2. 예시
3. 1.3. remove() : 클래스 삭제
  1. 1.3.1. 기본문법
  2. 1.3.2. 예시

# 1. classList

dom 요소의 class를 조작하는 메서드로 클래스의 추가, 삭제, 수정, 토글 을 제공한다.

# 1.1. toggle() : 클래스 추가+삭제

클래스를 추가하고 지우기를 번갈아가면서 수행한다.

# 1.1.1. 기본문법

Element.classList.toggle();

# 1.1.2. 예제

미리보기

https://qwerewqwerew.github.io/source/js/partial/class/1.html

html

css

<button>click</button>

.bgcolor--blue {
	background-color: blue;
}

document.querySelector('button').onclick = function () {
	document.body.classList.toggle('bgcolor--blue');
};

# 1.2. add() : 클래스 추가

HTML 요소에 클래스를 추가하여 다양한 기능을 수행할 수 있다. 이벤트에 따라 속성을 추가하여 다양한 상호작용을 구현할 수 있다.

# 1.2.1. 기본문법

Element.classList.add()

# 1.2.2. 예시

미리보기

https://qwerewqwerew.github.io/source/js/partial/selector/2.html

html

css

<button>click</button>
<div class="ball"></div>

.ball {
	width: 50px;
	height: 50px;
	background-color: pink;
	border-radius: 50%;
	transition: all 2s;
}
.ball.move {
	transform: translateX(500px);
}

document.querySelector('button').onclick = function () {
	document.querySelector('.ball').classList.add('move');
};

# 1.3. remove() : 클래스 삭제

HTML 요소에 add()메소드를 이용해 추가한 클래스를 이벤트에 따 라 삭제하여 상호작용할 수 있도록 한다.

# 1.3.1. 기본문법

Element.classList.remove()

# 1.3.2. 예시

미리보기

https://qwerewqwerew.github.io/source/js/partial/selector/3.html

html

css

<button>click</button>
<div class="ball"></div>

.bgcolor--blue {
	background-color: blue;
}
.ball {
	width: 50px;
	height: 50px;
	background-color: pink;
	border-radius: 50%;
	transition: all 2s;
}
.ball.move {
	transform: translateX(500px);
}

document.querySelector('button').onclick = function () {
	document.body.classList.remove('bgcolor--blue');
	document.querySelector('.ball').classList.add('move');
};

es6 javascript class