jQuery 「CSS操作」CSSスタイルの指定

DOM要素に対して、プロパティ名と値を渡しスタイルを設定します。スタイルの指定はCSSの記法と同様なので、backgroundやmarginといった略記式のプロパティの指定も可能です。

書式

CSS(' プロパティ名 ',' 値 ')

$(this).css('color','#fff')

値が数値の場合、単位がないときはデフォルトでピクセルと解釈されます。

サンプル

クリックした要素の背景をblueにする

<html>
      <head>
        <meta charset="UTF-8">
        <title>テストページ</title>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <style>
          div{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin:10px;
          }
        </style>
  </head>
  <body>
    <p id="result"></p>
    <div></div>
    <div></div>
    <div></div>
    
    <script>
    $(document).ready(function(){
      $('div').on('click',function(){
       $(this).css("background","blue");
      });
    });
    </script>
    </body>  
</html>

CSSと異なるプロパティ名

プロパティ名はCSSの記法と若干異なります。font-sizeなどのようにハイフンが含まれる名前の場合、ハイフンを取り除いてハイフン直後の文字を大文字に変えたもの、つまり「fontSize」がjQueryで使用する適切なプロパティ名のスタイルになります。このように複数後をひと綴りとして、先頭の単語以降の単語の1文字目を大文字で書き表すことを「キャメルケース」と呼びます。

カテゴリー:CSS操作JavaScriptjQuery