HTML5 で classList を使用して CSS クラスを操作する方法の詳細な紹介

この記事では主に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] }   
}

上でわかるように、Element.classList クラスは小さいですが、その中のすべてのメソッドは便利です。

CSSクラスを追加します

addメソッドを使用すると、1つ以上のCSSクラスをページ要素に追加できます:

myp.classList.add('myCssClass');

CSSクラスを削除します

removeメソッドを使用すると、単一のCSSを削除できますクラス:

myp.classList.remove('myCssClass');

このメソッドでは、スペースで区切って複数のクラス名を一度に渡すことができますが、実行結果は期待したものと異なる可能性があります。

CSS クラスの有無を反転します

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

このメソッドの機能は、myp 要素にこの CSS クラスがない場合、myp 要素に既にこの CSS がある場合はこの CSS クラスを追加することです。クラスを削除するだけです。反転操作です。

特定の CSS クラスが含まれているかどうかを確認してください

myp.classList.contains('myCssClass'); //returns true or false

現在、すべての最新のブラウザ (Firefox、Google Chrome など) がこの classList クラスをサポートしているため、新しい JavaScript クラス ライブラリは CSS クラスを操作することになると思います。以前のように要素ノードのクラス

属性を分析する必要はありません。

以上がHTML5 で classList を使用して CSS クラスを操作する方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。