スタイルを変更する

css

jQueryObject.css('プロパティ','値');

《index.html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>


《script.js》

$(function(){
  $('#div1').css('border', '3px solid red'); //3pxの赤い線がつく
  $('#div2').css('background', 'pink'); //背景色がピンクになる
  $('#div3').css('background', 'green'); //背景色が緑になる
  $('#div3').css('opacity', 0.5); //半透明になる
});


スタイル変更の優先順位
<style>
  #somediv p{ color:red; }
  .somediv p{ color:blue; }
</style>
<div id="somediv" class="somediv">
  <p>赤か青か</p>
</div>
スタイルをまとめて指定
$('#somediv').css({
  color: 'red',
  display: 'block',
  top: 120,
  left:100
});
  • css()のなか全体を{}で囲み、プロパティと値のペアを複数「,」で区切っていれます
  • {}で囲まれたもののことをオブジェクトといい、一連の値をまとめて渡すことができます

show/hide

  jQueryObject.show();
  jQueryObject.hide();


《index.html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div id="div1">最初は非表示になっているdiv</div>
<div id="div2">最初は表示されているdiv</div>
</body>
</html>


《style.css》

  #div1{ display: none;}
  #div2{ display: block;}


《script.js》

$(function(){
  $('#div1').show();
  $('#div2').hide();
});


  • 「#div1」は、「display: none」で非表示になっていますが、ページの読み込みが完了した時点で「show()」としているため、ブラウザでは表示されています
  • 「#div2」は、「display: block」で表示になっていますが、ページの読み込みが完了した時点で「hide()」としているため、ブラウザでは表示されません


CSSメソッドの場合

  jQueryObject.css('display', 'block'); //show()とほぼ同じ
  jQueryObject.css('display', 'none'); //hide()とほぼ同じ
アニメーションする「show/hide」
$(function(){
  $('#div1').show(500); //0.5秒で表示させるアニメーション
  $('#div2').hide(500); //0.5秒で非表示にするアニメーション
});

width/height

  jQueryObject.width( 幅 );
  jQueryObject.height( 高さ );


《index.html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div id="div1">width</div>
<div id="div2">height</div>
</body>
</html>


《style.css》

div {
  background: pink;
  margin: 10px;
}


《script.js》

$(function(){
  $('#div1').width(300);
  $('#div2').height(300);
});




CSSメソッドの場合

$(function(){
  $('#div1').css('width', 300);
  $('#div2').css('height', 300);
});