HTML DOM 클래스 목록 속성

페이지 DOM의 각 노드에는 classList 개체가 있습니다. 프로그래머는 내부 메서드를 사용하여 노드에서 CSS 클래스를 추가, 삭제 및 수정할 수 있습니다. 프로그래머는 classList를 사용하여 특정 노드에 특정 CSS 클래스가 할당되었는지 여부를 확인할 수도 있습니다.

클래스 추가(추가)

document.getElementById("myp").classList.add("mystyle");

요소에 여러 클래스 추가:

document.getElementById("myp").classList.add("mystyle", "anotherClass", "thirdClass");

클래스 제거(제거)

사용 제거 메소드를 사용하면 단일 CSS 클래스를 삭제할 수 있습니다:

document.getElementById("myp").classList.remove("mystyle");

여러 클래스 제거:

document.getElementById("myp").classList.remove("mystyle", "anotherClass", "thirdClass");

클래스 전환(toggle)

이 메소드의 기능은 myp가 요소가 켜져 있습니다. 이 CSS 클래스가 존재하지 않으면 이 CSS 클래스가 추가됩니다. myp 요소에 이미 이 CSS 클래스가 있으면 삭제됩니다. 반전 작업입니다.

document.getElementById("myp").classList.toggle("newClassName");

myp.classList.toggle('myCssClass'); //现在是增加
myp.classList.toggle('myCssClass'); //现在是删除

클래스(포함)가 존재하는지 여부

특정 CSS 클래스가 포함되어 있는지 확인:

var x = document.getElementById("myp").classList.contains("mystyle");

결과는 true 또는 false입니다.

길이 속성

은 클래스 목록의 클래스 수를 반환합니다.

요소에 포함된 클래스 이름 수 보기:

var x = document.getElementById("myp").classList.length; //3

요소의 모든 클래스 이름 가져오기:

<p id="myp" class="mystyle anotherClass thirdClass">I am a p element</p>

var x = document.getElementById("myp").classList;

item(index)

요소에 있는 클래스 이름의 인덱스 값을 반환합니다. 인덱스 값은 0부터 시작합니다. 인덱스 값이 범위를 벗어나면 null이 반환됩니다.

요소의 첫 번째 클래스 이름 가져오기(인덱스는 0):

var x = document.getElementById("myp").classList.item(0); //mystyle

브라우저는

단, IE9 및 이전 버전의 IE9에서는 이 속성을 지원하지 않습니다. 다음 코드가 이러한 아쉬움을 보완할 수 있습니다. (네티즌 코드에서)

if (!("classList" in document.documentElement)) {  
        Object.defineProperty(HTMLElement.prototype, 'classList', {  
            get: function() {  
                var self = this;  
                function update(fn) {  
                    return function(value) {  
                        var classes = self.className.split(/\s+/g),  
                            index = classes.indexOf(value);  
                          
                        fn(classes, index, value);  
                        self.className = classes.join(" ");  
                    }  
                }  
                  
                return {                      
                    add: update(function(classes, index, value) {  
                        if (!~index) classes.push(value);  
                    }),  
                      
                    remove: update(function(classes, index) {  
                        if (~index) classes.splice(index, 1);  
                    }),  
                      
                    toggle: update(function(classes, index, value) {  
                        if (~index)  
                            classes.splice(index, 1);  
                        else  
                            classes.push(value);  
                    }),  
                      
                    contains: function(value) {  
                        return !!~self.className.split(/\s+/g).indexOf(value);  
                    },  
                      
                    item: function(i) {  
                        return self.className.split(/\s+/g)[i] || null;  
                    }  
                };  
            }  
        });  
    }

HTML DOM classList 속성과 관련된 추가 기사는 다음과 같습니다. , PHP 중국어 웹사이트를 주목해주세요!