class 속성 다루기 -접근
document.요소명.classList
- HTML 요소의 class 속성값 접근
class 속성 다루기 - 추가
document.요소명.classList.add()
- HTML 요소의 class 속성값 추가
class 속성 다루기 - 삭제
document.요소명.classList.remove()
- HTML 요소의 class 속성값 삭제
class 속성 다루기 - 존재확인
document.요소명.classList.contains()
- HTML 요소의 class속성값이 존재확인 후 boolean 값 반환
class 속성 다루기 - 토글
document.요소명.classList.toggle()
- HTML 요소의 class 속성값 존재확인 후 추가 또는 삭제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bg {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="content" class="box text">JavaScript classList 접근</div>
<script>
// div요소의 class속성값 접근하기
let content = document.getElementById('content')
// class값을 찾고자 할때 : 요소명.classList
console.log('div요소의 class값 출력 : ', content.classList);
console.log(`divclass ${content.classList}`);
// 인덱스 활용
console.log(content.classList[0]);
console.log(content.classList[1]);
// div요소에 class값 추가하기
content.classList.add('bg');
console.log(content.classList);
// div요소에 class값 삭제하기
content.classList.remove('bg');
console.log(content.classList);
// div요소에 class값 존재여부 확인하기
let isCheck = content.classList.contains('bg');
console.log('bg의 존재여부', isCheck);
// div요소에 class값 추가/삭제 -> 토글
// 토글 -> class에 해당 값이 없다면 추가하고 있다면 삭제한다
content.classList.toggle('active');
console.log(content.classList);
content.classList.toggle('active');
console.log(content.classList);
</script>
</body>
</html>
개발자