jquery jQuery.cssHooksメソッド

TOPページに戻る > jquery入門

jQuery.cssHooks

jQuery.cssHooksは、CSSプロパティと処理を登録.css()の処理を 上書き(追加)できます
jQuery.cssHooksを使って新しく独自cssプロパティを作れます
jQuery.cssHooksオブジェクトにCSSプロパティと処理を登録、この登録したプロパティを.css()が処理するとき、.css()のデフォルトの処理に代わってjQuery.cssHooksオブジェクトに登録した処理が実行されます
jQueryは$で代用できます

追加するプロパティ名を指定する

jQuery.cssHooks.プロパティ名 = {
        get: function(elem, computed, extra) {
            return $(elem).css("プロパティ")
        set: function(elem, value) {
            $(elem).css({プロパティ: value});
        }
    };

.css()の処理を追加します

hogeプロパティを作成し、指定した要素をクリックしたときに、css()でhogeプロパティを使います

jquery

(function($) {
  $.cssHooks.hoge = {
        get: function(elem, computed, extra) {
         return $(elem).css("backgroundColor");
        },
        set: function(elem, value) {
            $(elem).css({
            background: value,
            width: 100,
            height: 100,
            margin: 10
            });
        }
    };
})(jQuery);

$(function() {
	$("#hoge").click(function(){
	 $(this).css("hoge","red");
	});
});

css

#hoge {
 width: 300px ;
 height: 300px ;
 cursor: pointer;
 background-color: #F90;
 }

html

<div id="hoge">
</div>

サンプル