className
- 해당 태그의 Class를 문자열로 작업하는 속성
<html>
<div id="div_id" class="class1 class2">
</html>
let div_element = getElementById('div_id');
console.log(div_element.className); // 출력 값: class1 class2
// 클래스 전체 변경
div_element.className = "class_name_1";
console.log(div_element.className); // 출력 값: class_name_1
// 클래스 추가
div_element.className += " class_name_2";
console.log(div_element.className); // 출력 값: class_name_1 class_name_2
classList
- 해당 태그의 Class를 리스트로 작업하는 속성
<html>
<div id="div_id" class="class1 class2">
</html>
let div_element = getElementById('div_id');
console.log(div_element.classList); // 출력 값: class1 class2
// 클래스 개수 확인
console.log(div_element.classList.length); // 출력 값: 2
// 클래스 item 하나씩 가져오기
for(let i=0; i<div_element.classList.length; i++) {
console.log(div_element.classList.item(i)); // 출력 값: class1 class2
}
// 클래스 추가
div_element.classList.add('class_name_1');
console.log(div_element.classList); // 출력 값: class1 class2 class_name_1
// 클래스 여러개 추가
div_element.classList.add('class_name_2', 'class_name_3');
console.log(div_element.classList); // 출력 값: class1 class2 class_name_1 class_name_2 class_name_3
// 클래스 이름 바꾸기
div_element.classList.replace('class2', 'class_name_0');
console.log(div_element.classList); // 출력 값: class1 class_name_0 class_name_1 class_name_2 class_name_3
// 클래스 제거
div_element.classList.remove('class1', 'class_name_0');
console.log(div_element.classList); // 출력 값: class_name_1 class_name_2 class_name_3
// 클래스 토글 (있으면 추가, 없으면 제거)
div_element.classList.toggle('class_name_3');
console.log(div_element.classList); // 출력 값: class_name_1 class_name_2
// 클래스 토글 + 조건 (조건이 참이면 추가, 거짓이면 제거)
div_element.classList.toggle('class_name_3', true);
console.log(div_element.classList); // 출력 값: class_name_1 class_name_2 class_name_3
// 클래스 이름 존재 여부
console.log(div_element.classList.contains('class_name_1')); // 출력 값: true;
참고 링크: https://hianna.tistory.com/469
[Javascript] class 추가/변경/삭제/읽기 (className, classList)
class 이름 읽기 class 추가/수정 class 삭제 class toggle 특정 클래스 이름이 class 속성에 포함되는지 확인하기 1. class 이름 읽기 예제 1. className function handleOnClick() { alert(document.getElementB..
hianna.tistory.com
'Web > JavaScript' 카테고리의 다른 글
| Vue.js - 쿠키 사용 (vue-cookies) (0) | 2021.09.15 |
|---|---|
| Vue.js - 컴포넌트 ↔ 컴포넌트 데이터 전송 (props, emit) (0) | 2021.09.14 |
| JavaScript - Prototype (0) | 2021.09.13 |
| JavaScript - JSON String ↔ JSON Object (0) | 2021.09.11 |
| JavaScript - Class (0) | 2021.09.11 |