jQueryでCSSを使う方法

こちらは初心者向けです。

jQueryでCSSを使う

CSSファイルやスタイルシートを定義しなくてもjQueryでデザインを定義、変更することができます。
こちらをできるようにする関数は「.css()」です。

css.html

$(".css-div").css("width", "100px").css("border", "#000 2px solid");

.css(///).css(///)
こんな感じでcssをずっとつないで定義することもできまして

css.html

$(".css-div").css({
  width: "100px",
  border: "#000 2px solid"
});

のように１つの「.css()」の中に複数のスタイルを定義することもできます。

ボタンを押したら線の色が変わることを作ってみましょう。
コードはこちらです。

css.html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<p><button>変更</button></p>

<div class="css-div">こんばんは</div>

<script type="text/javascript">
$(document).ready(function() {
  $(".css-div").css({
    width: "100px",
    border: "#000 2px solid",
    padding: "5px"
  });
  $(document).on("click", "button", function() {
    $(".css-div").css("borderColor", "#f00");
  });
});
</script>

ボタンを押すと線の色が赤に変更します。