HTML5에서 classList를 사용하여 CSS 클래스를 작동하는 방법에 대한 자세한 소개

본 글에서는 HTML5에서 classList를 활용하여 CSS 클래스를 운용하는 방법을 주로 자세히 소개하고 있으니 관심 있는 분들은 참고하시기 바랍니다.

수년 동안

JavaScript 및 JavaScript 도구 라이브러리 작업을 하면서 종종 다음과 같은 환상을 갖게 됩니다. 언제 최신 브라우저가 이러한 JavaScript 대신에 몇 가지 보조 메서드와 클래스 라이브러리를 제공할 것인가? jQuery와 같은 라이브러리를 브라우저 기본 메서드로 바꾸겠습니다. 브라우저가 확실히 이러한 방향으로 개선될 것이라는 것을 알고 있지만 이러한 진화 과정은 그다지 빠르지 않을 것이며 다양한 브라우저가 함께 이러한 혁신을 이뤄야 합니다. Firefox, Google Chrome, 특히 IE는 이러한 주류 브라우저에서만 사용할 수 있습니다. 기능을 통해 우리의 소망이 진정으로 실현될 수 있습니다. 좋은 소식은 HTML5 API에 classList라는 기능이 추가되었다는 것입니다.

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

Element.classList

이 classList 객체에는 유용한 메서드가 많이 있습니다.

{   
 length: {number}, /* # of class on this element */   
 add: function() { [native code] },   
 contains: function() { [native code] },   
 item: function() { [native code] }, /* by index */   
 remove: function() { [native code] },   
 toggle: function() { [native code] }   
}

위에서 볼 수 있듯이 Element.classList 클래스는 다음과 같습니다. 매우 작지만 여기에 포함된 모든 방법은 유용합니다.

CSS 클래스 추가

add 메소드를 사용하면 하나 이상의 CSS 클래스를 페이지 요소에 추가할 수 있습니다.

myp.classList.add('myCssClass');

삭제 CSS 클래스

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

myp.classList.remove('myCssClass');

이 메소드에서는 구분 기호를 사용하여 여러 클래스 이름을 한 번에 전달할 수 있습니다. 공백이 있지만 실행 결과가 예상한 것과 다를 수 있습니다.

CSS 클래스 유무 반전

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

이 메소드의 기능은 myp 요소에 이 CSS 클래스가 없을 때, 이 CSS 클래스를 추가합니다. myp 요소에 이미 이 CSS 클래스가 있으면 제거합니다. 반전 작업입니다.

특정 CSS 클래스가 포함되어 있는지 확인하세요rree

현재 모든 최신 브라우저(Firefox, Google Chrome 등)는 이 classList 클래스를 지원하므로 다음과 같습니다. 새로운 JavaScript 클래스 라이브러리는 이전처럼 요소 노드의 클래스

속성 을 분석할 필요 없이 classList 클래스를 사용하여 페이지 CSS 클래스를 작동합니다!

위 내용은 HTML5에서 classList를 사용하여 CSS 클래스를 작동하는 방법에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!