** 영상으로 보실 분은 아래 주소를 클릭해주세요.
1. className 속성
- className속성은 문서 객체의 클래스명을 설정하거나 반환합니다.
1) 클래스명 반환
## 문법
var 변수명 = 객체선택.className;
## 코드 예시
<!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>- <h1> 태그의 클래스명을 경고창에 띄워보겠습니다.
## 코드 결과
- 클래스명이 경고창에 잘 반환되는 것을 확인할 수 있습니다.
2) 클래스명 설정
## 문법
객체선택.className = '클래스명';
## 코드 예시
<!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>- <h1> 태그에 클래스명을 추가해보았습니다.
## 코드 결과
- 크롬 개발자모드로 확인해보면 잘 들어가 있는 것을 확인할 수 있습니다.
2. classList 속성
- classList속성의 문서 객체의 클래스명을 DOMTokenList 객체로 반환합니다.
- 이 속성은 문서객체에서 CSS클래스를 추가, 제거 및 전환하는데 유용합니다.
- 객체로 반환되다보니 속성과 메서드를 갖고 있습니다.
- 그리고 IE9 이하의 버전에서는 적용 안된다는 점을 알고 있으면 될듯합니다.
- 크로스브라우징할때는 브라우저 버전을 잘 확인해서 적용해주세요.
1) classList의 속성과 메서드
| 종류 | 설명 |
| length | 클래스 수를 반환 |
| add('클래스명1','클래스명2',...) |
문서객체 하나 이상의 클래스명을 추가하는 메서드 |
| contains('클래스명') | 문서객체에 매개변수의 클래스명이 있는지 여부를 true/false로 나타내는 메서드 |
| item(index) | 문서객체에서 지정된 인덱스번호가 있는 클래스명을 반환하는 메서드 인덱스 범위가 벗어나면 null반환 |
| remove('클래스명1','클래스명2',...) | 문서객체에서 하나 이상의 클래스명을 제거하는 메서드 ** 존재하지 않는 클래스를 제거해도 오류가 발생되지 않음 |
| toggle('클래스명'); | 문서객체에 클래스명을 추가하거나 제거하는 것을 번갈아 실행하는 메서드 요소가 제거되면 false를 리턴, 요소가 추가되면 true를 리턴 |
2) length 속성
- 선택된 문서객체의 클래스 개수를 반환하는 속성
## 문법
객체선택.classList.length;
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Class 속성</title>
</head>
<body>
<h1 class="test01">제목태그</h1>
<h1 class="test01 test02">제목태그</h1>
<h1 class="test01 test02 test03">제목태그</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( ) 메서드는 클래스를 제거하는 메서드입니다.
## 문법
객체선택.classList.add('클래스명1','클래스명2',...);
객체선택.classList.remove('클래스명1','클래스명2',...);
## 코드 예시
- 클래스추가버튼을 누르면 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>
//1. 문서객체선택
var text = document.getElementById('text');
var add = document.getElementById('add');
var remove = document.getElementById('remove');
//2. 추가버튼 클릭
add.addEventListener('click',function(){
text.classList.add('active');
});
//3. 제거버튼 클릭
remove.addEventListener('click',function(){
text.classList.remove('active');
});
</script>
</body>
</html>- active클래스에는 배경색은 검정색, 글자색은 핑크색으로 바뀌도록 설정했습니다.
## 코드 결과
4) toggle( ) 메서드
- toggle( ) 메서드는 add( ) 메서드와 remove( ) 메서드를 번갈아 실행하는 메서드입니다.
## 문법
객체선택.classList.toggle('클래스명');
## 코드 예시
- <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>
<script>
//1. 문서객체선택
var text = document.getElementById('text');
//2. 클릭이벤트
text.addEventListener('click',function(){
this.classList.toggle('active');
});
</script>
</body>
</html>
## 코드 결과
- 한번 클릭하면 클래스가 추가되고, 또 클릭하면 클래스가 제거되는 것을 확인할 수 있습니다.
5) contains( ) 메서드
- contains( ) 메서드는 문서객체가 해당 클래스를 갖고 있는 유무에 따라 true/false를 반환합니다.
## 문법
객체선택.classList.contains('클래스명');
## 코드 예시
- <h1> 태그를 클릭하면 active클래스를 toggle( ) 메서드로 추가/제거하고, 추가되면 뒤의 p태그에 [클래스 추가]라는 텍스트를 추가하고, 제거되면 [클래스 제거]라는 텍스트를 추가해보겠습니다.
<!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>
<p id="test"></p>
<script>
//1. 문서객체선택
var text = document.getElementById('text');
var test = document.getElementById('test');
//2. 클릭이벤트
text.addEventListener('click',function(){
//active클래스 토글처리
this.classList.toggle('active');
//contains메서드를 통한 active클래스를 갖고 있는지 여부 확인
var is = this.classList.contains('active');
if(is){ //클래스를 갖고 있다면
test.textContent = '클래스추가';
}else{ //클래스를 갖고 있지 않다면
test.textContent = '클래스제거';
}
});
</script>
</body>
</html>
## 코드 예시
- 한번클릭하면 [클래스 추가]가 뜨고, 또 한 번 클릭하면 [클래스 제거]가 뜨는 것을 확인할 수 있습니다.
'웹언어 > JAVASCRIPT' 카테고리의 다른 글
| [JS강좌] 30강 dataset : 문서객체 사용자정의속성 - 오쌤의 니가스터디 (0) | 2021.07.04 |
|---|---|
| [JS강좌] 29강 문서객체 영역 속성 - 오쌤의 니가스터디 (0) | 2021.07.03 |
| [JS강좌] 27강 자바스크립트 에러(Error) - 오쌤의 니가스터디 (0) | 2021.06.18 |
| [JS강좌] 26강 자바스크립트 정규표현식(RegExp) - 오쌤의 니가스터디 (0) | 2021.06.18 |
| [JS강좌] 25강 자바스크립트 Forms - 오쌤의 니가스터디 (0) | 2021.06.17 |
