HTML DOM classList 속성
정의 및 사용
classList 속성은 DOMTokenList 개체로, 요소의 클래스 이름을 반환합니다.
이 속성은 추가, 제거 및 CSS 클래스를 전환 할 요소에 사용됩니다.
classList 속성은 읽기 전용,하지만 당신은 그것을 수정하는 방법을 추가 ()를 사용) (제거 할 수 있습니다.
브라우저 지원
표의 수치 속성 버전 번호를 먼저 지원 브라우저를 나타낸다.
| 재산 | |||||
|---|---|---|---|---|---|
| classList | 8.0 | 10.0 | 3.6 | 5.1 | 11.5 |
문법
요소 .classList
등록
| 재산 | 기술 |
|---|---|
| 길이 | 클래스 목록 클래스의 수를 돌려줍니다 이 속성은 읽기 전용입니다 |
방법
| 방법 | 기술 |
|---|---|
| 추가 (클래스 1, Class2의, ...) | 요소에 하나 이상의 클래스 이름을 추가합니다. 지정된 클래스 이름이 이미 존재하는 경우, 그것은 / TD> 추가하지 않습니다 |
| 포함 (클래스) | 부울 값을 반환 판단되는지 여부를 지정 클래스 이름의 존재. 가능한 값 :
|
| 항목 (인덱스) | 요소 인덱스 값의 클래스 명을 돌려줍니다. 인덱스 값은 0에서 시작합니다. 상기 인덱스 값은 범위 또는 null 범위를 벗어나면 |
| 제거 (클래스 1, Class2의, ...) | 클래스 이름 중 하나 이상의 요소를 제거한다. 참고 : 존재하지 않는 클래스 이름을 제거, 불평하지 않습니다. |
| 토글 (클래스, 참 | 거짓) | 요소에 클래스 이름을 전환. 첫 번째 매개 변수는 요소를 제거 할 false를 반환하는 클래스의 이름입니다. 클래스 이름이 존재하지 않는 경우, 상기 요소의 클래스 이름을 추가하고 true를 반환한다. 두 번째는 선택적 매개 변수가 요소에 관계없이 클래스 이름이 존재의 추가 또는 카테고리를 제거 할 필수 여부를 설정하는 데 사용됩니다 부울 값입니다. 예를 들면 : 요소 .classList.toggle ( "classToRemove"클래스 제거 , 거짓을); 클래스를 추가 요소 .classList.toggle ( "classToAdd" , true)를; 참고 : Internet Explorer 또는 오페라 12 및 이전 버전의 두 번째 매개 변수를 지원하지 않습니다. |
기술 설명
| 반환 값 : | DOMTokenList, 클래스 이름 목록은 요소를 포함 |
|---|
더 많은 예제
예
의 <DIV> 요소에 대해 더 많은 카테고리를 추가합니다 :
중요 document.getElementById ( "myDIV") .classList.add ( "mystyle", "anotherClass", "thirdClass");
»시도
예
의 <DIV> 요소에 클래스를 제거합니다 :
중요 document.getElementById ( "myDIV") .classList.remove ( "mystyle");
»시도
예
의 <DIV> 요소에 대해 여러 클래스를 제거합니다 :
중요 document.getElementById ( "myDIV") .classList.remove ( "mystyle", "anotherClass", "thirdClass");
»시도
예
의 <DIV> 요소는 범주를 전환하는 경우 :
중요 document.getElementById ( "myDIV") .classList.toggle ( "newClassName");
»시도
예
클래스 이름 <div> 요소를 가져 오기 :
<DIV ID = "myDIV"클래스 = "mystyle anotherClass thirdClass"> 내가 div 요소 </ DIV>
VAR X = document.getElementById를 ( "myDIV" ) .classList;
VAR X = document.getElementById를 ( "myDIV" ) .classList;
X 출력은 다음과 같습니다
mystyle anotherClass thirdClass
»시도
예
참조 <DIV> 요소는 클래스 이름을 가지고 있습니다 :
VAR X = document.getElementById를 ( "myDIV" ) .classList.length;
X 출력은 다음과 같습니다
3
»시도
예
첫 번째 클래스 명 (인덱스 0)에 <div> 요소를 가져 오기 :
VAR X = document.getElementById를 ( "myDIV" ) .classList.item (0);
X 출력은 다음과 같습니다
mystyle
»시도
예
요소를 참조하십시오 "mystyle"카테고리 존재한다 :
VAR X = document.getElementById를 ( "myDIV" ) .classList.contains ( "mystyle을");
X 출력은 다음과 같습니다
참된
»시도
예
요소를 참조 존재 "mystyle"카테고리, 본 제거하면 다른 클래스 이름 :
VAR X = document.getElementById를 ( "myDIV을" );
경우 (x.classList.contains ( "mystyle") ) {
x.classList.remove ( "anotherClass");
} 그밖에 {
( ".를 찾을 수 없습니다 경고 ");
}
경우 (x.classList.contains ( "mystyle") ) {
x.classList.remove ( "anotherClass");
} 그밖에 {
( ".를 찾을 수 없습니다 경고 ");
}
»시도
관련 기사
CSS 자습서 : CSS 선택기
CSS 참조 : CSS 선택기의 .class
HTML DOM 참조 설명서 : HTML DOM className 속성
HTML DOM 참조 설명서 : HTML DOM getElementsByClassName () 메소드
HTML DOM 참조 설명서 : HTML DOM 스타일 개체