jquery cssメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery css()メソッド

cssメソッドは、セレクタで指定した要素のcssのスタイルを指定できます。引数にプロパティと値を指定します

$("cssを変更する要素").css("プロパティ","値");

指定したHTML要素のcssを指定します。引数にプロパティと値を指定します

cssでは何も指定していません。jquery css()メソッドだけで背景色を緑色にします

jquery

$(function() {
	$("span#hoge").css("background-color","green");
});

html

<span id="hoge">テキスト</span>

実行前

テキスト

実行後

テキスト

複数のスタイルをまとめて指定する


複数のスタイルをまとめて指定する場合は、cssとプロパティの書き方が違うところがあります。
background-colorなどハイホンが入るプロパティ名はハイホンを消して次のアルファベットを大文字で記述します。jqueryではハイホンが入るとエラーが出るためこうゆう書き方をします
$("cssを変更する要素").css({プロパティ:"値", プロパティ:"値"});

指定したHTML要素のcssを変更します。引数に複数のプロパティと値を指定します

jquery

$(function() {
	$("span#hoge2").css({ color : "white", backgroundColor : "pink"});
});

html

<span id="hoge2">テキスト</span>

実行前

テキスト

実行後

テキスト

cssの値を取得する

引数にプロパティ名のみ記述するとcssの値を取得できます。取得した値はjqueryオブジェクトとして使えます
$("cssを指定している要素").css("プロパティ");

jquery

$(function() {
	var hoge3 = $("span#hoge3").css("background-color");
	$("span#hoge4").css("background-color",hoge3);
});

html

<span id="hoge3">hoge3テキスト</span>
<span id="hoge4">hoge4テキスト</span>

css

#hoge3{ background-color: blue;}

hoge3の要素からcssの値を取得

hoge3テキスト

取得した値をcss()メソッドで他の要素に適用

hoge4テキスト







(C)2012 ホームページ作成無料