JS　jQueryでHTMLのCSS要素を操作

CSSのスタイルをjQueryで変更するとき

CSSのスタイルをjQueryで変更するとき、CSSメソッドを使う。
1つのCSSを記述するときは、プロパティと値をそれぞれ「'」で囲み、間を「,」で区切るシンプルな書き方をする。

基本の書き方

$(`セレクタ`).css('background-color','#0000FF');

// 複数のプロパティを指定するとき
$('セレクタ').css({
  'プロパティ1': '値1',
  'プロパティ2': '値2',

  :
  :

  'プロパティn': '値n'
});

slideDown();、.slideUp();、.show();、.hide();の4つを使えるようになると、さまざまなスタイルに応用できる

div要素(box1)を上から下へスライドさせる

app.css

.box1 {
  display: none;
  background-color: #FF0000;
  height: 200px;
  wodth: 200px;
}

app.js

$(function(){
  $('.box1').slideDown();
})

【解説】
display: none;：box1が最初は非表示になるようにするため。

下から上へスライドさせる

app.css

.box1 {
  /* display: none; を削除 */ 
  background-color: #FF0000;
  height: 200px;
  width: 200px;
}

app.js

$(function(){
  $('.box1').slideUp();
})

非表示の要素をjQueryで表示させる

app.css

.box1 {
  display: none;
  background-color: #FF0000;
  height: 200px;
  wodth: 200px;
}

app.js

$(function(){
  $('.box1').show();
  $('.box1').css({'background-color': '#0000FF'});
});

【解説】
box1の背景色が青色で表示される

表示されている要素をjQueryで非表示にする

app.css

.box1 {
  /* display: none; を削除 */ 
  background-color: #FF0000;
  height: 200px;
  width: 200px;
}

app.js

$(function(){
  $('.box1').hide();
});

【解説】
ファイルを保存してブラウザをリロードすると、赤い正方形が一瞬だけ表示される