jQuery css, addClass, removeClass
今回は、jQueryの「css」,「addClass」, 「removeClass」について書きます。
cssメソッドを使うと、指定した要素のスタイルを追加・変更できます。
例えば、文字色や背景色などを変えたい場合に使えます。
<body> <h1>Hello</h1> <script> $(function(){ $('h1').css('color','blue'); }); </script> </body>
実行結果
引数とかは、このようになっています。
$('要素').css('プロパティ', '値');
$('h1').css('color','blue').css('background','green');
$('h1').css({'color':'blue','background':'green'});
実行結果
また、「.css('プロパティ', '')」とすると、スタイルを削除できます。
$('h1').css({'color':'blue','background':'green'}); //colorだけ削除 $('h1').css('color','');
実行結果
・「addClass」メソッド
addClassメソッドを使うと、指定した要素にCSSクラスを追加できます。
<!-- 省略 --> <style> .hello{ color: yellow; margin-left: 30px; } </style> <!-- 省略 --> <body> <h1>Hello</h1> <script> $(function(){ $('h1').addClass('hello'); }); </script> </body>
実行結果
引数とかは、このようになっています。
$('要素').addClass('クラス名');
ちなみに、idは「attr」を使います。
・「removeClass」メソッド
removeClassメソッドを使うと、指定した要素から、CSSクラスを削除できます。
<!-- 省略 --> <style> .hello{ color: yellow; margin-left: 30px; } </style> <!-- 省略 --> <body> <h1 class="hello">Hello</h1> <script> $(function(){ $('h1').removeClass('hello'); }); </script> </body>
実行結果
引数とかは、このようになっています。
$('要素').removeClass('クラス名');
これで、終わります。
参考サイト
jQuery:css()メソッドで指定した要素にCSSを追加する | raining
jQuery – CSSのclassを追加・削除する『 addClass() / removeClass() / toggleClass() 』 | 1:n – DETELU Blog