jQuery 「CSS操作」CSSプロパティの取得

DOM要素に設定されたスタイルやプロパティを取得します。プロパティ及び引数にはこれから行う処理に必要な値を指定します。このとき、marginやbackgroundなどといった複数の値を一括指定可能な略記式のプロパティでは指定できません。必ず、margin-rightやbackground-colorなど、単一の値を返すプロパティを指定しましょう。上記の場合だと、divに設定されているbackground-colorを取得します。

書式

CSS("プロパティ名")

var color = $(this).css("background-color")

サンプル

プロパティの取得

<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;
          }
        </style>
  </head>
  <body>
    <div></div>
    <p id="result"></p>
    <script>
    $(document).ready(function(){
      $('div').on('click',function(){
        var color = $(this).css("background-color");
        $("#result").html("この要素の色は<span style='color:'" + color + ";'>"+color + "</span>です。");
      });
    });
    </script>
    </body>  
</html>

カテゴリー:CSS操作JavaScriptjQuery