【jQuery】 CSSの制御 - PCゲーマーのWebデザイン備忘録

jQueryでのCSS制御する方法には2種類あります。

一つは以下のような書き方。

$('div').css('background','#f00');

もう一つは以下のような、CSSの書き形近い書き方になります。

$('div').css({
'color' : '#f00',
});

実行例（ソース）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの制御</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="first">うどんが食べたい</div>
<div id="second">そろそろDDR3メモリを変えたい</div>

<script>
$(document).ready(function(){
$('#first').css('color','#f00');
$('#first').css('bacground-color','#fff');
$('#first').css('border','1px solid #555');

$('#second').css({
    'color' : '#f00',
    'background-color' : '#fff',
    'border' : '1px solid #555'
});//CSSの終了
});//処理の終了
</script>

</body>
</html>

結果：
f:id:game-web-design:20141007120216p:plain
結果は両方同じになります。