この記事では主にHTML5のclassListを使ったCSSクラスの操作方法を詳しく紹介していますので、興味のある方はJavaScript
で長年戦ってきたや私がよく持っているJavaScriptツールライブラリを参照してください。この空想: 最新のブラウザーはいつ、jQuery などの JavaScript ツール ライブラリを置き換えるヘルパー メソッドと クラス ライブラリ を提供するのでしょうか。それらをブラウザー ネイティブのメソッドに置き換えましょう。ブラウザーがこの方向に間違いなく改善されることはわかっていますが、この進化のプロセスはそれほど速くはなく、Firefox、Google Chrome、特に IE のような主流のブラウザーがそのような機能を備えた場合にのみ、さまざまなブラウザーが協力してそのような革新を起こす必要があります。私たちの願いが本当に実現します。良いニュースとして、そのような機能の 1 つである classList が HTML5 API に追加されました。
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メソッドを使用すると、1つ以上のCSSクラスをページ要素に追加できます:myp.classList.add('myCssClass');
CSSクラスを削除します
myp.classList.remove('myCssClass');
CSS クラスの有無を反転します
myp.classList.toggle('myCssClass'); //现在是增加 myp.classList.toggle('myCssClass'); //现在是删除
特定の CSS クラスが含まれているかどうかを確認してください
myp.classList.contains('myCssClass'); //returns true or false
以上がHTML5 で classList を使用して CSS クラスを操作する方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。