-メソッド.webp)
jQuery css() メソッド: CSS 属性を簡単に操作
このチュートリアルでは、jQuery の css() メソッドの使い方について詳しく解説し、簡潔な構文で HTML 要素のスタイル属性を読み書きする方法を紹介します。
副題
1. css() メソッドの基本
- 構文： `$(selector).css(propertyName, propertyValue);`
- 単一の CSS 属性値の読み取り： `$(selector).css(propertyName);`
- 単一の CSS 属性値の設定： `$(selector).css(propertyName, propertyValue);`
- オブジェクトを使用して複数の CSS 属性値を設定： `$(selector).css({propertyName1: propertyValue1, propertyName2: propertyValue2});`
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#p1").css("color", "red");
});
$("#btn2").click(function(){
$("#p2").css({
"background-color": "yellow",
"font-size": "20px"
});
});
});
</script>
</head>
<body>
<p id="p1">段落 1</p>
<button id="btn1">色を変更</button><br>
<p id="p2">段落 2</p>
<button id="btn2">背景色とフォントサイズを変更</button>
</body>
</html>
2. css() メソッドの一般的な使用例
- 要素の色を動的に変更する
- 画面サイズに応じて要素のサイズと位置を調整する
- アニメーション効果を作成する
- CSS クラスを追加または削除する
3. css() メソッドと addClass() および removeClass() の違い
- css() メソッドは、要素のインラインスタイルを直接操作します。
- addClass() および removeClass() メソッドは、クラスを追加または削除することで要素のスタイルを変更します。
| メソッド | 説明 |
|---|---|
| css() | 要素のインラインスタイルを直接操作します。 |
| addClass() | 要素にクラスを追加します。 |
| removeClass() | 要素からクラスを削除します。 |
4. 注意点
- ハイフンを含む CSS 属性を設定するには、キャメルケースを使用します。例：`backgroundColor`
- `$(this)` を使用して現在の要素を参照します。
- 単位に注意してください。例：ピクセル (`px`)、パーセンテージ (`%`) など
関連リン ク
関連 Q&A
-
質問: css() メソッドを使用して、要素に複数のスタイルプロパティを設定するにはどうすればよいですか？
回答: css() メソッドにオブジェクトを渡すことで、複数のスタイルプロパティを設定できます。オブジェクトのプロパティ名は CSS プロパティ名、プロパティ値は設定する値になります。 -
質問: css() メソッドを使用して、要素の現在の背景色を取得するにはどうすればよいですか？
回答: css('background-color') のように、取得したい CSS プロパティ名を引数として css() メソッドを呼び出すことで、現在の値を取得できます。 -
質問: css() メソッドと addClass() メソッドのどちらを使用する方が良いですか？
回答: 既存のクラスを再利用する場合や、複数のスタイル変更を一度に適用する場合は addClass() メソッドを使用する方が効率的です。一方、動的にスタイルを計算したり、要素に固有のスタイルを適用したりする場合は css() メソッドを使用します。状況に応じて適切な方法を選択してください。