ホームページ > 記事 > ウェブフロントエンド > jqueryを使用してスタイルを追加できますか?
jquery を使用してスタイルを追加できます。方法: 1. "$(element).attr("style","inline style code")" ステートメントを使用します。 2. "$(element).css" を使用します。 ({ "属性名":"属性値"})" ステートメント; 3. "$(要素).addClass("クラス名")" ステートメントを使用します。
このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。
jquery では、要素にスタイルを追加するさまざまな方法があります。次に、いくつかの方法を示します:
方法 1: attr() メソッドを使用してインライン スタイルを追加します
<!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("style","border: 2px solid green; background-color: #55aa7f;color: white;"); }); }); </script> </head> <body> <p>hello,测试文字</p> <button>添加样式</button> </body> </html>
方法 2: css() メソッド
css() メソッドを使用して、1 つ以上のスタイルを取得または設定します。要素の属性に一致します。
<!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").css({"border": "1px solid red","background-color": "#FFC0CB","color": "white"}); }); }); </script> </head> <body> <p>hello,测试文字</p> <button>添加样式</button> </body> </html>
方法 3: addClass メソッド
addClass() メソッドを使用して、選択した要素に 1 つ以上のクラスを追加します。
<!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").addClass("intro"); }); }); </script> <style type="text/css"> .intro { font-size: 120%; color: red; } </style> </head> <body> <p>hello,测试文字</p> <button>添加样式</button> </body> </html>
推奨される関連ビデオ チュートリアル: jQuery チュートリアル (ビデオ)
以上がjqueryを使用してスタイルを追加できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。