과거에는 JS 또는 JQuery, Hasclass, AddClass 및 RemoveClass의 일부 방법을 사용해야합니다. 귀찮은.
H5의 새 클래스리스트를 사용하면보다 편리한 요소의 범주 이름을 작동시킬 수 있습니다.
알아채다클래스리스트 호환성은 IE10 아래의 IE 브라우저와 호환되지 않으며 다소 열악합니다.
모범적 인 예
<html> <gead> <thef-8> <title> mthstyle {width : 300px; font-size : 25px;} </style> </head> <body> <p> 버튼을 클릭하여 Mystyle 클래스를 DIV 요소에 추가하십시오. </p> <button onclick = myFunction ()> me를 클릭하십시오 </button> <div id = mydiv> 나는 div 요소입니다. </div> <cript> function myFunction () {document.getElementById (myDiv) .classList.add (mystyle);} </script> </body> </html> 새로운 카테고리메소드 추가를 사용하면 페이지 요소에 하나 이상의 범주를 추가 할 수 있습니다.
document.getElementById (myDiv) .classList.Add (mystyle);클래스를 삭제하십시오
제거 메소드를 사용하면 단일 CSS 클래스를 삭제할 수 있습니다.
document.getElementById (myDiv) .classList.remove (mystyle);요소의 범주 이름을 전환합니다
요소의 범주 이름을 전환합니다. 토글 방법, 문법 : 토글 (클래스, true | false)을 사용하십시오.
첫 번째 매개 변수는 요소에서 제거 할 클래스 이름이며 False를 반환합니다.
이름이 존재하지 않으면 클래스 이름이 요소에 추가되어 true를 반환합니다.
두 번째는 선택적 매개 변수입니다. 부울 값은 해당 이름이 존재하는지 여부에 관계없이 요소가 클래스를 추가하거나 제거 해야하는지 여부를 설정합니다. 예를 들어:
하나를 제거하십시오
documb
하나를 추가하십시오
documb
참고 : Internet Explorer 또는 Opera 12 및 이전 버전은 두 번째 매개 변수를 지원하지 않습니다.
특정 클래스가 포함되어 있는지 확인하십시오포함 된 방법을 사용하여 클래스가 존재하는지 여부를 결정하고 부울 값으로 돌아갑니다.
// true 또는 false document.getElementById (myDiv) .classList.Crantains (MyDiv);
위는이 기사의 모든 내용입니다.