@ PHP

css():CSSの制御

jQuery では簡単な記述で CSS のプロパティの値を設定したり取得したりできます。CSS を操作するには、css() というメソッドを使います。

CSSの設定

css() を使って CSS のプロパティを設定するには、引数にプロパティ名と値を ,(カンマ)区切りで指定します。

css-01.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p>テキストテキストテキストテキスト</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("p").css("color","red")
});
</script>
</body>

</html>

demo

複数の CSS プロパティを設定したい場合には、css() の引数に次のような形式で指定します。

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

css-02.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p>テキストテキストテキストテキスト</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("p").css({
    backgroundColor:"yellow",
    fontWeight:"bold",
    color:"red"
  })
});
</script>
</body>

</html>

demo

CSSの値の取得

CSS プロパティの値を取得するには、css() の引数に値を取得したいプロパティ名を指定します。

css_03.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p style="color:red">テキストテキストテキストテキスト</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("p").text($("p").css("color"))
});
</script>
</body>

</html>

demo