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

 

// 테스트 객체
<input class="ex ex-input ex-pink" />

// text로 classname 얻어내기
document.getElementById('객체id').className

// 결과
"ex ex-input ex-pink"

// list로 classname 얻어내기
document.getElementById('ex').classList

// 결과
["ex", "ex-input", "ex-pink"]

// classname 갯수 확인
document.getElementById('ex').classList.length

// 결과
3

// classname 변경
document.getElementById('ex').className
document.getElementById('ex').className = 'ex-change'
document.getElementById('ex').className

// 결과 
"ex ex-input ex-pink"
"ex-change"

// classname
document.getElementById('ex').className
document.getElementById('ex').classList.add('ex-add1', 'ex-add2') // 방법1
document.getElementById('ex').className += ' ex-add3' // 방법2 space+calssname spacebar를 꼭 포함시켜주어야한다.
document.getElementById('ex').className


//결과
"ex ex-input ex-pink"
"ex ex-input ex-pink ex-add1 ex-add2 ex-add3"

// classname 삭제
document.getElementById('ex').className
document.getElementById('ex').classList.remove('ex-pink', 'ex-input')
document.getElementById('ex').className

//결과
"ex ex-input ex-pink"
"ex"

// classname 변경
document.getElementById('ex').className
document.getElementById('ex').classList.replace('ex-pink', 'ex-blue');
document.getElementById('ex').className
"ex ex-input ex-pink"
"ex ex-input ex-blue"


// classname toggle
// 클래스 토글(Toggle) 
// element.classList.toggle('toggle 할 클래스 이름')
// element.classList.toggle()은 만약 element의 클래스 목록에 해당 클래스가 있으면 제거하고, 클래스가 없으면 추가합니다.

document.getElementById('ex').className
document.getElementById('ex').classList.toggle('ex-view')
document.getElementById('ex').className
document.getElementById('ex').classList.toggle('ex-view')
document.getElementById('ex').className

// 결과
"ex ex-input ex-pink"
"ex ex-input ex-pink ex-view"
"ex ex-input ex-pink"

// 조건에 따라 클래스 Toggle 하기
// element.classList.toggle('toggle 할 클래스 이름', 조건문)
let view = true;
// 클래스 토글(Toggle)
function toggleClass() {
  view = !view
  document.getElementById('ex').classList.toggle('ex-view', view);
}
document.getElementById('ex').className
toggleClass()
document.getElementById('ex').className
toggleClass()
document.getElementById('ex').className

// 결과
"ex ex-input ex-pink"
"ex ex-input ex-pink ex-view"
"ex ex-input ex-pink"

// 특정 클래스 이름이 class 속성에 포함되는지 확인하기
document.getElementById('ex').classList.contains('ex-pink');
document.getElementById('ex').classList.contains('ex-blue');

// 결과
true
false

 

 

[Javascript] class 추가/변경/삭제/읽기 (className, classList)
https://hianna.tistory.com/469

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