1. Element.classList
• 웹 요소(Element)로부터 클래스 콜렉션을 반환하는 읽기 전용 속성이다.
• 메소드
2. 실습
1) html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 실습</title>
<style>
.text{
color : red;
}
</style>
</head>
<body>
<h1>실험용 테스트</h1>
<button id="add">add</button>
<button id="remove">remove</button>
<button id="toggle">toggle</button>
<script src="script.js"></script>
</body>
</html>2) js 코드
const h1 = document.querySelector("h1")
const addBtn = document.querySelector("#add")
const removeBtn = document.querySelector("#remove")
const toggleBtn = document.querySelector("#toggle")
addBtn.addEventListener('click', function(){
h1.classList.add('text')
})
removeBtn.addEventListener('click', function(){
h1.classList.remove('text')
})
toggleBtn.addEventListener('click', function(){
h1.classList.toggle('text')
})3) 결과
블로그 이전했습니다 -> https://young-code.tistory.com