jQuery の属性とスタイル (4)
クラス名を動的に変更することで、要素を変更してさまざまな効果を示すことができます。 HTML 構造では、複数のクラスがスペースで区切られます。ノード (またはラベル) に複数のクラスが含まれる場合、DOM 要素の応答の className 属性はクラス名の配列ではなく、スペースを含む文字列を取得します。マルチクラスの操作は非常に面倒です。同じ jQuery 開発者もこの状況を考慮し、クラス名を動的に追加するための .addClass() メソッドを追加しました
addClass( className ) メソッド
次のコードを見てください:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style type="text/css"> div{ width:200px; height:200px; } .bg{ background:red; } </style> </head> <body> <div id="div">php 中文网</div> <script type="text/javascript"> $("#div").addClass('bg'); </script> </body> </html>
removeClass() スタイルを削除します
次の場合:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style type="text/css"> .div{ width:200px; height:200px; background:red; } </style> </head> <body> <div class="div">php 中文网</div> <script type="text/javascript"> $(".div").removeClass("div"); </script> </body> </html>
上記のコードにより、divのスタイルが削除されます