📌 className 속성
- className 속성은 문서 객체의 클래스명을 설정하거나 반환합니다.
1. 클래스명 반환
📕 문법
<script>
var 변수명 = 객체선택.className;
</script>✏️ 예시 (h1 태그의 클래스명 경고창에 띄우기)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Class 속성</title>
</head>
<body>
<h1 class="title" id="text">제목태그</h1>
<script>
var text = document.getElementById('text')
var cName = text.className;
alert(cName);
</script>
</body>
</html>🖥️ 결과
2. 클래스명 설정
📕 문법
<script>
객체선택.className = '클래스명';
</script>✏️ 예시 (h1 태그에 클래스명 추가하기)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Class 속성</title>
</head>
<body>
<h1 id="text">제목태그</h1>
<script>
var text = document.getElementById('text')
text.className = 'title';
</script>
</body>
</html>🖥️ 결과
📌 classList 속성
- classList 속성의 문서 객체의 클래스명을 DOMTokenList객체로 반환한다.
- 문서객체에서 CSS 클래스를 추가, 제거 및 전환하는데 유용하다.
1. classList의 속성과 메서드
2. length 속성
- 선택된 문서객체의 클래스 개수를 반환하는 속성
📕 문법
<script>
객체선택.classList.length;
</script>✏️ 예시
- 첫번째 태그에는 클래스를 한 개, 두 번째 태그에는 클래스를 두 개, 세 번째 태그에는 클래스를 세 개 작성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Class 속성</title>
</head>
<body>
<h1 class="test01">h1태그</h1>
<h1 class="test01 test02">h1태그</h1>
<h1 class="test01 test02 test03">h1태그</h1>
<script>
var h1 = document.getElementsByTagName('h1');
console.log(h1[0].classList.length);
console.log(h1[1].classList.length);
console.log(h1[2].classList.length);
</script>
</body>
</html>🖥️ 결과
3. add() / remove() 메서드
- add()는 클래스를 추가, remove()는 클래스를 제거하는 메서드이다.
📕 문법
<script>
객체선택.classList.add('클래스명1','클래스명2',...);
객체선택.classList.remove('클래스명1','클래스명2',...);
</script>✏️ 예시
- 클래스추가버튼을 누르면 active라는 클래스를 추가, 클래스 제거 버튼을 누르면 active라는 클래스를 제거
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Class 속성</title>
<style>
.active{
background-color: black; color: pink;
}
</style>
</head>
<body>
<h1 id="text">제목태그</h1>
<hr>
<button id="add">클래스추가</button>
<button id="remove">클래스제거</button>
<script>
var text = document.getElementById('text');
var add = document.getElementById('add');
var remove = document.getElementById('remove');
add.addEventListener('click',function(){
text.classList.add('active');
});
remove.addEventListener('click',function(){
text.classList.remove('active');
});
</script>
</body>
</html>🖥️ 결과
- 클래스 추가 버튼 클릭시
- 클래스 제거 버튼 클릭시
4. toggle() 메서드
- toggle( ) 메서드는 add( ) 메서드와 remove( ) 메서드를 번갈아 실행하는 메서드
📕 문법
<script>
객체선택.classList.toggle('클래스명');
</script>✏️ 예시
- h1태그 클릭시 active 클래스가 추가/제거.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Class 속성</title>
<style>
.active{
background-color: black; color: pink;
}
</style>
</head>
<body>
<h1 id="text">h1태그</h1>
<script>
var text = document.getElementById('text');
text.addEventListener('click',function(){
this.classList.toggle('active');
});
</script>
</body>
</html>5. contains() 메서드
-문서객체가 해당 클래스를 갖고 있는 유무에 따라 true/false를 반환
📕 문법
<script>
객체선택.classList.contains('클래스명');
</script>✏️ 예시
- h1 태그 클릭 시 active 클래스를 toggle()메서드로 추가/제거
- 추가되면 p태그에 [클래스 추가]라는 텍스트 추가, 제거되면 [클래스 제거]라는 텍스트 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Class 속성</title>
<style>
.active{
background-color: lightgoldenrodyellow; color: orangered;
}
</style>
</head>
<body>
<h1 id="text">제목태그</h1>
<p id="test"></p>
<script>
var text = document.getElementById('text');
var test = document.getElementById('test');
text.addEventListener('click',function(){
this.classList.toggle('active');
var is = this.classList.contains('active');
if(is){
test.textContent = '클래스추가';
}else{
test.textContent = '클래스제거';
}
});
</script>
</body>
</html>
중국어랑 코딩하기 (❛ ֊ ❛„)