jQuery 「CSS操作」独自のCSSプロパティを作成する

.cssHooksはjQueryで利用できるCSSプロパティを独自に作成可能です。「get:function」には値を取得する際に実行したい処理を記述し、「set:function」には値を設定するときに実行したい処理を記述します。.cssHooksはベンダープレフィックスに依存しないCSSプロパティを作成するのに役立ちます。

書式

$.cssHooks[" CSSプロパティ名 "] = {
  get: function(elem, computed, extra){
    値を取得するときに実行したい処理
  },
  set: function(elem, value){
    値を設定するときに実行したい処理
  }
}

$.cssHooks["widthHeight"] = {
  get: function(elem, computed, extra){
    return $(elem).css("width");
  },
  set: function(elem, value){
    $(elem).css({ width: value, height: value });
  }
}

サンプル

widthとheightのサイズを一括で取得・設定するCSSプロパティ。elemはセレクタの要素が設定されます。サンプルでは「get:function」でセレクタのwidth及びheightを配列に格納しているので、widthHeightを実行したときにセレクタのwidthおよびheightを取得してきます。「set:function」はセレクタのwidth及びheightを一括で変更できるよう、.css()メソッドを用いて記述します。valueには設定される値が入るため、サンプルの場合だと250pxの値がvalueに渡され縦横の辺がそれぞれ150pxのdiv要素に変化します。また、サイズを変更したdiv要素のwidth及びheightを.css()メソッドと作成したwidthHeightプロパティを用いて変数whに代入しテキストの表示に利用します。

<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{
            background: red;
            width: 100px;
            height: 100px;
            margin: 10px;
          }
          span {
            margin: 10px;
          }
        </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <span></span>
    <script>
      $.cssHooks["widthHeight"] = {
        get: function(elem, computed, extra){
          return [$(elem).width(), $(elem).height()];
        },
          set: function(elem, value){
          $(elem).css({ width: value, height: value });
        }
      }
      $("div:last").css("widthHeight","150px");
      var wh = $("div:last").css("widthHeight");
      $("span").text('div:lastのサイズは、'+wh+'です。');
    </script>
    </body>  
</html>

カテゴリー:CSS操作JavaScriptjQuery