요소의 classList 속성 사용 방법
2838 단어 Class
이 유형의 대상은 빈칸으로 구분된 문자열 그룹을 설명하고, 그룹의 항목마다 요소의 클래스 이름을 나타낸다.HTMLElement.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList or HTMLAreaElement.relList 등의 메서드가 객체를 반환합니다.
속성:
방법:
간단한 사례
var elemClassList = document.querySelector('#Bubby').classList,
classNum = elemClassList.length;
elemClassList.add('sexy');
elemClassList.remove('sexy');
elemClassList.toggle('fat');
if( elemClassList.contains('nipple') ){
console.info('OH YEAH');
}
jQuery의ddClass와removeClass를 시뮬레이션해 주세요.
var Sys = {
addClass: function (elem, value) {
//
if (!elem) return;
var arr = [];
//
if (elem.nodeType) arr.push(elem);
// HTML , NodeList HTMLCollection
if (elem.length) {
for (var j = 0, ln = elem.length; j < ln; j++) {
// HTML
if (elem[j].nodeType) arr.push(elem[j]);
}
}
//
for (var i = 0, len = arr.length; i < len; i++) {
var elem = arr[i];
if (elem.nodeType === 1 && elem.className.indexOf(value) < 0 ) {
elem.classList.add(value);
}
}
},
removeClass: function (elem, value) {
var arr = [];
if (!elem) return;
// HTML
if (elem.nodeType) arr.push(elem);
// HTML
if (elem.length) {
for (var j = 0, ln = elem.length; j < ln; j++) {
// HTML
if (elem[j].nodeType) arr.push(elem[j]);
}
}
for (var z = 0, len = arr.length; z < len; z++) {
var elem = arr[z];
if (elem.nodeType === 1 && elem.className.indexOf() >= 0) {
elem.classList.remove(value);
}
}
}
};
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Error configuring application listener of class org.springframework.web.context.ContextLoaderListeneSolution: 1. Copy org.springframework.web-3.0.5.RELEASE.jar to the WEB-INF/lib directory 2. Add in web.xml contextConfig...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.