ホームページ > 記事 > ウェブフロントエンド > jQueryでクラススタイルを置き換える方法
置換メソッド: 1. 古いクラス スタイルを削除するには、removeClass() メソッドを使用し、新しいクラス スタイルを追加するには、addClass() メソッドを使用します。 2. クラス属性を変更するには、attr() メソッドを使用します。 class クラスだけで十分で、構文は "$(element).attr("class","new class name")" です。
このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。
#jquery 置換クラス スタイル
方法 1:removeClass() メソッドと addClass() メソッドを使用する
removeClass() メソッドを使用して古いクラス スタイルを削除し、addClass() メソッドを使用して新しいクラス スタイルを追加します。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").removeClass("old-class").addClass("new-class") ; }); }); </script> <style type="text/css"> .old-class{ border: 1px solid red; background-color: #FFC0CB; } .new-class{ border: 2px solid green; background-color: #55aa7f; color: white; } </style> </head> <body> <p class="old-class">hello,测试文字</p> <button>替换类样式</button> </body> </html>
方法 2: attr() を使用します。
attr() メソッドを使用してクラス属性を変更し、新しいクラス class<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").attr("class","new-class"); }); }); </script> <style type="text/css"> .old-class{ border: 1px solid red; background-color: #FFC0CB; } .new-class{ border: 2px solid green; background-color: #55aa7f; color: white; } </style> </head> <body> <p class="old-class">hello,测试文字</p> <button>替换类样式</button> </body> </html>に直接置き換えます。関連ビデオチュートリアル:
jQuery チュートリアル (ビデオ)
以上がjQueryでクラススタイルを置き換える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。