JS/jQuery - 요소의 class 읽기, 추가, 변경, 제거, 포함 여부

닌니디자인 JS 썸네일

클래스 읽기

바닐라스크립트

const ex = document.getElementById('ex');
 
// 클래스 이름 문자열로 리턴
ex.className;
ex.classList;
 
ex.classList.length; // 클래스 갯수
 
ex.classList.item(0); // 인덱스 0번째 클래스 이름
ex.classList.item(1); // 인덱스 1번째 클래스 이름
ex.classList.item(2); // 인덱스 2번째 클래스 이름

className, classList	element의 클래스 이름을 문자열로 리턴
classList.length	element의 클래스 갯수를 리턴
classList.item(index)	element의 특정 인덱스의 클래스 이름을 리턴

 

제이쿼리

const ex = $('#ex');
 
ex.attr('class');

attr('class')	element의 속성의 값을 가져와서 문자열로 리턴

 

 

 

---

 

클래스 추가/변경

바닐라스크립트

const ex = document.getElementById('ex');
 
ex.className = 'ex2'; // 기존의 class를 ex2로 변경 (전체변경)
ex.className += 'ex2'; // 기존의 class에 ex2를 추가
 
ex.classList.add('ex2'); // 기존의 class에 ex2를 추가
ex.classList.add('ex2', 'ex3'); // 기존의 class에 ex2, ex3을 추가
 
ex.classList.replace('ex', 'ex3'); // 기존의 class 중에서 ex를 ex2로 변경
 
ex.classList.toggle('ex'); // 기존의 class 중에 ex가 있으면 제거, 없으면 추가

className = newClass	기존의 class를 모두 변경하거나 += 을 이용해 class를 추가 할 수 있다.
classList.add(newClass)	기존의 class에 새로운 class를 추가할 수 있다. 한개만 추가 할 수도 있고, 여러개 추가 할 수도 있다.
classList.replace(oldClass, newClass)	기존의 class중에 특정 class를 찾아서 새로운 class로 변경 할 수 있다.
classList.toggle(class)	element의 클래스 중에 해당 클래스가 존재하면 제거하고 존재하지 않으면 추가한다.

 

제이쿼리

const ex = $('#ex');
 
ex.attr('class', 'ex2'); // 기존의 class를 ex2로 변경 (전체변경)
ex.attr('class', 'ex2 ex3'); // 기존의 class를 ex2, ex3으로 변경 (전체변경)
 
ex.addClass('ex2'); // 기존의 class에 ex2를 추가
ex.addClass('ex2 ex3'); // 기존의 class에 ex2, ex3을 추가
 
ex.toggleClass('ex'); // 기존의 class 중에 ex가 있으면 제거, 없으면 추가

attr('class', newClass)	기존의 class를 모두 변경한다. 여러개 추가 할 수도 있다.
addClass(newClass)	기존의 class에 새로운 class를 추가할 수 있다.
toggleClass(newClass)	element의 클래스 중에 해당 클래스가 존재하면 제거하고 존재하지 않으면 추가한다.

 

 

 

---

 

클래스 제거

바닐라스크립트

const ex = document.getElementById('ex');
 
ex.classList.remove('ex2'); // 기존의 class중에 ex2를 제거
ex.classList.remove('ex2', 'ex3'); // 기존의 class중에 ex2, ex3을 제거

classList.remove(class)	원하는 class를 제거 할 수 있다. 여러개를 삭제 할 수도 있다.

 

제이쿼리

const ex = $('#ex');
 
ex.removeClass('ex2'); // 기존의 class중에 ex2를 제거
ex.removeClass('ex2 ex3'); // 기존의 class중에 ex2, ex3을 제거

removeClass(class)	원하는 class를 제거 할 수 있다. 여러개를 삭제 할 수도 있다.

 

 

 

---

 

클래스 포함여부

바닐라스크립트

const ex = document.getElementById('ex');
 
ex.classList.contains('ex2'); // 기존의 class중에 ex2가 존재하면 true

classList.contains(class)	element의 클래스 중에서 특정 클래스 이름이 존재하면 true, 존재하지 않으면 false 반환

 

제이쿼리

const ex = $('#ex');
 
ex.hasClass('ex2'); // 기존의 class중에 ex2가 존재하면 true

hasClass(class)	element의 클래스 중에서 특정 클래스 이름이 존재하면 true, 존재하지 않으면 false 반환