[Javascript] class 추가/변경/삭제/읽기 (className, classList)

 

1. class 이름 읽기
2. class 추가/수정
3. class 삭제
4. class toggle
5. 특정 클래스 이름이 class 속성에 포함되는지 확인하기

 

1. class 이름 읽기

예제 1. className

<div id='ex' class='foo bar'></div>
<input 
       type='button' 
       value='class 이름 읽기' 
       onclick='handleOnClick()'/>

function handleOnClick()  {
  alert(document.getElementById('ex').className);
}

 

document.getElementById('ex').className;

element.className 속성은 element의 클래스 이름을 문자열로 리턴합니다.

 

예제 2. classList

<div id='ex' class='foo bar'></div>
<input 
       type='button' 
       value='class 이름 읽기' 
       onclick='getClassName()'/>
<input 
       type='button' 
       value='class item 개수 확인' 
       onclick='getCountClassItem()'/>
<input 
       type='button' 
       value='class 이름 하나씩 읽기' 
       onclick='getClassItemName()'/>

// class 이름 읽기
function getClassName()  {
  alert(document.getElementById('ex').classList);
}

// class item 개수 확인
function getCountClassItem()  {
  alert(document.getElementById('ex').classList.length);
}

// class 이름 하나씩 읽기
function getClassItemName()  {
  const classLength =
    document.getElementById('ex').classList.length;
  for(let i = 0; i < classLength; i++){
    alert(document.getElementById('ex').classList.item(i));
  }
}

 

 class 이름 읽기 

element.classList;

element.className과 마찬가지로 classList 속성을 사용해서도 class의 이름을 읽을 수 있습니다.

 

 class item 개수 확인 

element.classList.length;

element의 class에는 여러개의 class item이 지정될 수 있습니다.

이 예제에서는 'foo', 'bar' 이렇게 2개의 class item이 지정되어 있습니다.

class item의 갯수를 세기 위해서는 classList.length 속성을 이용합니다.

 

 class item 이름 하나씩 읽기 

element.classList.item(index);

element.classList.item()을 이용하여 특정 index의 class item 이름을 읽어 올수 있습니다.

 

 

2. class 추가/수정

예제1. className

<div id='ex'></div>
<input 
       type='button' 
       value='클래스 이름 설정/변경' 
       onclick='setClassName()'/>
<input 
       type='button' 
       value='클래스 이름 추가' 
       onclick='addClassName()'/>

// 클래스 이름 설정/변경
function setClassName() {
  document.getElementById('ex').className = 'foo';
  alert(document.getElementById('ex').className);
}

// 클래스 추가
function addClassName() {
  document.getElementById('ex').className += ' bar';
  alert(document.getElementById('ex').className);
}

 

 클래스 이름 설정/변경하기 

element.className = '이름';

element.className 속성에 직접 값을 지정해 줄수 있습니다.

 

 클래스 이름 추가하기 

element.className += ' 이름';

기존의 클래스에 값을 추가하려면, 기존의 className에 추가하려는 값을 문자열로 연결해 줍니다.

스페이스도 같이 추가해 주어야 합니다.

 

예제2. classList

<div id='ex'></div>
<input 
       type='button' 
       value='클래스 이름 설정' 
       onclick='setClassName()'/>
<input 
       type='button' 
       value='클래스 이름 추가' 
       onclick='addClassName()'/>
<input 
       type='button' 
       value='클래스 이름 여러개 추가' 
       onclick='addClassNames()'/>
<input 
       type='button' 
       value='클래스 이름 변경' 
       onclick='changeClassName()'/>

// 클래스 이름 설정
function setClassName() {
  document.getElementById('ex').className = 'foo';
  alert(document.getElementById('ex').className);
}

// 클래스 추가
function addClassName() {
  document.getElementById('ex').classList.add('bar');
  alert(document.getElementById('ex').className);
}

// 클래스 여러개 추가
function addClassNames() {
  document.getElementById('ex').classList.add('baz', 'qux');
  alert(document.getElementById('ex').className);
}

// 클래스 변경
function changeClassName() {
  document.getElementById('ex').classList.add('bar');
  alert('변경전 : ' + document.getElementById('ex').className);
  document.getElementById('ex').classList.replace('bar', 'car');
  alert('변경후 : ' + document.getElementById('ex').className);
}

 

 클래스 이름 설정 

element.className = '이름';

기존의 클래스 이름을 모두 삭제하고 새로 설정할 때는 

예제 1과 같이 'className' 속성을 사용합니다.

'classList'는 readonly 속성이기 때문에, 직접 값을 지정할 수 없습니다.

 

 클래스 추가 

element.classList.add('이름');

element.classList는 readonly 속성이지만, element.classList.add() 메소드를 사용해서 class를 추가할 수 있습니다.

이 함수는 기존의 class에 새로운 클래스를 추가해줍니다.

예제1에서 "element.className += ' 이름'"을 이용해서 클래스를 추가했던 것과 비슷합니다.

className에 문자열을 추가해주는 것과 element.classList.add() 메소드가 다른점은

문자열 앞에 스페이스를 입력하지 않아도 된다는 점,

그리고, 추가하려는 클래스가 이미 class 속성에 포함되어 있다면, 추가하지 않는다는 점입니다.

예제1의 '클래스 이름 추가' 버튼을 반복해서 클릭해보면, 'bar' 클래스가 반복해서 추가되는 것을 볼수 있습니다.

그렇지만, 예제2의 '클래스 이름 추가' 버튼은 반복해서 클릭하더라도 'bar' 클래스는 한번만 나타납니다.

 

 클래스 여러개 추가 

element.classList.add('이름1', '이름2'...);

element.classList.add() 함수에 파라미터를 여러개 전달하여 

한번에 여러개의 클래스를 추가할 수도 있습니다.

 

 클래스 변경 

element.classList.replace('변경전이름', '변경후이름');

기존의 class 속성에서 특정 class item을 찾아서, 해당 item의 이름을 변경할 수도 있습니다.

 

 

3. class 삭제

<div id='ex' class='foo bar baz'></div>
<input 
       type='button' 
       value='foo 클래스 삭제' 
       onclick='removeFooClass()'/>
<input 
       type='button' 
       value='bar, baz 클래스 삭제' 
       onclick='removeBarBazClass()'/>

// 클래스 1개 삭제
function removeFooClass() {
  document.getElementById('ex').classList.remove('foo');
  alert(document.getElementById('ex').className);
}

// 클래스 여러개 삭제
function removeBarBazClass() {
  document.getElementById('ex').classList.remove('bar', 'baz');
  alert(document.getElementById('ex').className);
}

 

 클래스 삭제 

element.classList.remove('삭제할 클래스명1', '삭제할 클래스명2'...)

element.classList.remove() 메소드를 이용해서 원하는 class item을 삭제할 수 있습니다.

 

 

4. class toggle

예제1. Toggle

<div id='ex' class='foo'>안녕하세요</div>
<input 
       type='button' 
       value='클래스 토글(Toggle)' 
       onclick='toggleClass()'/>

.foo  {
  color : red
}

// 클래스 토글(Toggle)
function toggleClass() {
  document.getElementById('ex').classList.toggle('foo');
  alert(document.getElementById('ex').classList);
}

 

 클래스 토글(Toggle) 

element.classList.toggle('toggle 할 클래스 이름')

element.classList.toggle()은 만약 element의 클래스 목록에 해당 클래스가 있으면 제거하고,

클래스가 없으면 추가합니다.

위 예제에서 버튼을 누를 때마다 'foo' 클래스가 추가되었다가, 제거되었다가 하는 것을 확인 할 수 있습니다.

 

예제2. 조건에 따라 클래스 Toggle 하기

<div id='ex' class='foo'>안녕하세요</div>
<input 
       type='button' 
       value='클래스 토글(Toggle)' 
       onclick='toggleClass()'/>

.foo  {
  color : red
}

let cnt = 0;
// 클래스 토글(Toggle)
function toggleClass() {
  cnt++;
  
  document.getElementById('ex').classList.toggle('foo', cnt % 3 === 0);
}

 

 조건에 따라 클래스 toggle 하기 

element.classList.toggle('toggle 할 클래스 이름', 조건문)

조건에 따라 클래스를 toggle 할 수도 있습니다.

조건문은 element.classList.toggle() 함수의 2번째 파라미터로 입력합니다.

만약, 조건문의 결과가 true이면 지정한 클래스가 추가되고,

조건문의 결과가 false이면 지정한 클래스가 삭제됩니다.

위 예제는 버튼을 클릭할 때마다 i의 값을 증가시키고,

i의 값이 3의 배수일 경우에만 'foo' 클래스를 추가 해주고 있습니다.

 

 

5. 특정 클래스 이름이 class 속성에 포함되는지 확인하기

<div id='ex' class='foo'></div>
<input 
       type='button' 
       value='foo 클래스 확인' 
       onclick='checkClass("foo")'/>
<input 
       type='button' 
       value='bar 클래스 확인' 
       onclick='checkClass("bar")'/>

.foo  {
  color : red
}

// 클래스가 있는지 확인하기
function checkClass(className) {
  let isExist = document.getElementById('ex').classList.contains(className);
  
  alert(isExist);
}

 

element.classList.constains()

이 함수는 특정 클래스 이름이 element의 class 속성에 포함되어 있는지 확인해 줍니다.

해당 속성이 포함되어 있으면 true를 리턴하고, 포함되어 있지 않으면 false를 리턴합니다.