[Javascript] className(), classList()와 메소드
className
✏️ className은 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다.
var cName = element.className;
or
element.className = cName;
classList
✏️ classList는 읽기 전용 프로퍼티이다.
공백으로 구분된 문자열인 element.className을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다.
메소드
1. add
classList.add( String [, String [, ...]] )
지정한 클래스 값을 추가한다.
만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.
2. remove
classList.remove( String [, String [, ...]] )
지정한 클래스 값을 제거한다.
🚨 존재하지 않는 클래스를 제거하는 것은 에러를 발생하지 않는다.
3. item( Number )
콜렉션의 인덱스를 이용하여 클래스 값을 반환한다.
4. toggle
classList.toggle( String [, force] )
하나의 인수만 있을 때 클래스 값을 토글링한다.
즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.
두번째 인수가 있을 때 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거한다.
5. contains
classList.contains( String )
지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.
6. replace
classList.replace( oldClass, newClass )
존재하는 클래스를 새로운 클래스로 교체한다.
✏️ addEventListener로 className 바꾸기
const textElement = document.getElementById("text");
const CLICKED_CLASS = "clicked";
function handleClick() {
const currentClass = animalElement.className;
if (currentClass !== CLICKED_CLASS) {
textElement.className = CLICKED_CLASS;
} else {
textElement.className = "";
}
}
function init() {
textElement.addEventListener("click", handleClick);
}
init();
id가 "text"인 엘리먼트에 "clicked" class 한 개만 사용할 수 있다.
contains,toggle 메소드로 해결한다.
✏️ contains 메소드 사용
const textElement = document.getElementById("text");
const CLICKED_CLASS = "clicked";
function handleClick() {
const hasClass = textElement.classList.contains(CLICKED_CLASS);
if (hasClass) {
textElement.classList.remove(CLICKED_CLASS);
} else {
textElement.classList.add(CLICKED_CLASS);
}
}
function init() {
textElement.addEventListener("click", handleClick);
}
init();
✏️ toggle 메소드 사용
toggle로 더 간단하게 코드를 작성할 수 있다.
const textElement = document.getElementById("text");
const CLICKED_CLASS = "clicked";
function handleClick() {
textElement.classList.toggle(CLICKED_CLASS);
}
function init() {
textElement.addEventListener("click", handleClick);
}
init();
실행 화면은 모두 똑같다.
Author And Source
이 문제에 관하여([Javascript] className(), classList()와 메소드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@newsilver1028/JavaScript-className-classList와-메소드저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)