본 글에서는 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] } }
CSS 클래스 추가
add 메소드를 사용하면 하나 이상의 CSS 클래스를 페이지 요소에 추가할 수 있습니다.myp.classList.add('myCssClass');
삭제 CSS 클래스
myp.classList.remove('myCssClass');
CSS 클래스 유무 반전
myp.classList.toggle('myCssClass'); //现在是增加 myp.classList.toggle('myCssClass'); //现在是删除
특정 CSS 클래스가 포함되어 있는지 확인하세요rree
현재 모든 최신 브라우저(Firefox, Google Chrome 등)는 이 classList 클래스를 지원하므로 다음과 같습니다. 새로운 JavaScript 클래스 라이브러리는 이전처럼 요소 노드의 클래스 속성 을 분석할 필요 없이 classList 클래스를 사용하여 페이지 CSS 클래스를 작동합니다!
위 내용은 HTML5에서 classList를 사용하여 CSS 클래스를 작동하는 방법에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!