ホームページ > 記事 > ウェブフロントエンド > jQueryでスタイルを変更する方法
jquery のスタイルを変更する方法: 1. css() を使用して、指定した要素に新しいスタイルを設定します。構文 "$(selector).css({"属性名 1":"属性値1" ,"属性名 2":"属性値 2",...})"; 2. attr() を使用して、指定された要素のスタイル属性値を設定します。構文は "$(selector).attr( "style"," 属性名 1: 属性値 1; 属性名 2: 属性値 3;...")"。
このチュートリアルの動作環境: Windows7 システム、jquery3.6 バージョン、Dell G3 コンピューター。
#jquery のスタイルを変更するには 2 つの方法があります:
方法 1: css() メソッドを使用する
css() メソッドでマッチングを設定できます要素 1 つ以上のスタイル属性。 css() メソッドを使用して新しいスタイルを設定するだけです構文:$(selector).css({"属性名1":"属性值1","属性名2":"属性值2",...})例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-3.6.3.min.js"></script> <script> $(document).ready(function() { $("button").on("click", function() { $("div").css({"color":"red","background-color":"papayawhip","font-size":"25px"}); }); }); </script> <style> .tr1 { color: green; } .tr2 { color: red; background-color: blanchedalmond; } </style> </head> <body class="ancestors"> <div style="color: yellow;background-color:powderblue;">欢迎来到PHP中文网!</div><br> <button>改变div元素的style样式</button> </body> </html>##方法 2: attr() メソッドを使用します。
attr() メソッドは、選択した要素の属性値を設定または返します。
attr() メソッドを使用して要素のスタイル属性値を設定するだけです。
文法:
$(selector).attr("style","属性名1:属性值1;属性名2:属性值3;...")
例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-3.6.3.min.js"></script> <script> $(document).ready(function() { $("button").on("click", function() { $("div").attr("style", "color:pink;background-color:peru;font-size: 18px;"); }); }); </script> <style> .tr1 { color: green; } .tr2 { color: red; background-color: blanchedalmond; } </style> </head> <body class="ancestors"> <div style="color: red;background-color:papayawhip;">欢迎来到PHP中文网!</div><br> <button>改变div元素的style样式</button> </body> </html>
##[推奨学習: jQuery ビデオ チュートリアル
,ウェブ フロントエンド ビデオ ]
以上がjQueryでスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。