CSSプロパティの設定と値の取得

2015年10月29日

jQueryで、シンプルにCSSのプロパティの値を設定したり、取得したりできます。CSSを操作するときは、css()命令を使用します。

CSSプロパティの設定

css()を使用してCSSプロパティの値を指定するには、括弧内に「プロパティ名」と「値」を「,」区切り記述します。

    $("p:eq(0)").css("color","blue");

1	$("p:eq(0)").css("color","blue");

実行すると、テキストが青になっているのは確認できます。

	$("p:eq(1)").css({
		"color":"red",
		"background-color":"yellow",
		"font-size":"20px"
	});

$("p:eq(1)").css({

"color":"red",

"background-color":"yellow",

"font-size":"20px"

});

上記を実行すると、2番目のpタグ内の文字が文字は赤く、背景は黄色、フォントサイズが20pxになっているのが確認できます。複数のプロパティの値を同時に設定する場合は、css()の括弧内の記述は以下の通りにします。

	$(セレクター).css({
		"プロパティ名":"プロパティの値",
		"プロパティ名":"プロパティの値",
		"プロパティ名":"プロパティの値"
	});

$(セレクター).css({

"プロパティ名":"プロパティの値",

"プロパティ名":"プロパティの値"

});

プロパティ名とプロパティ値は:(コロン)で繋ぎ、値は"(ダブルコーテション)で包みます。CSSは複数のセレクターを指定したときのように,(カンマ)で繋げます。

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>
    <style>
	*{margin:0;padding:0;}
	
    #container{
        width:640px;
        height:400px;
        font-weight:100;
        margin:0 auto;}
    </style>        
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

<div id="container">

<p>test</p>
<p>test</p>
</div><!--contatiner-->

<script>
$(document).ready(function(){

    $("p:eq(0)").css("color","blue");

    $("p:eq(1)").css({
        "color":"red",
        "background-color":"yellow",
        "font-size":"20px"
    });

});
</script>

</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

font-weight:100;

margin:0 auto;}

</style>

</head>

<body>

</div>

$(document).ready(function(){

$("p:eq(0)").css("color","blue");

$("p:eq(1)").css({

"color":"red",

"background-color":"yellow",

"font-size":"20px"

});

</script>

</body>

</html>