cssHooks

2017-04-01

浏览器特定属性名

对于CSS中设定针对不同浏览器的形同属性，除了hack方法，多数应该想到的就是如下的形式：

.myDiv{
-webkit-transition: all 3s;
 -moz-transition: all 3s;
 -ms-transition: all 3s;
 -o-transition: all 3s;
 transition: all 3s;
}

上述代码是给myDiv类绑定一个变化动画，即.myDiv无论发生哪个属性的变化时都需要3s钟完成。当时用jquery的css方法会给当前元素添加样式，但比如这些需要浏览器兼容前缀的css样式，可能就需要特殊处理，这就是jqueryHook的用法。

Hooks

见名知意，其代表着钩子，而这个钩子用于覆盖设置或者获取特定CSS属性的方法，标准化CSS3功能。构建一个hooks并不难，如下

(function($) {
  //确定是否有hooks存在
  if(!$.cssHooks){
      throw ('jQuery 1.4.3以上版本可以使用cssHooks请升级版本');
      return;
  }else{
      $.cssHooks['someCSSProp']={
          get:function (ele,computed,extra) {
            //这里是获取CSS属性的方法
          },
          set:function(ele,value){
              //这里是设置CSS属性的方法
          }   
      }
  }
})(jQuery);

其实做到这一步就已经可以完成相关方法了，你可以做到更完美：

判断浏览器是否支持标准属性

任何变种写法是否是临时元素的style对象成员

function styleSupport(prop) {
   var vendorProp,supprotedProp,
    //测试该属性是否有浏览器默认写法
     canProp = prop.charAt(0).toUpperCase()+prop.slice(1),//转为首字大写已便在后面监测
     prefixes = ['Moz','Webkit','O','Ms'],//浏览器引擎前缀
     div = document.createElement('div');
      if(prop in div.style){
          //支持浏览器默认写法
          supportedProp = prop;
      }else{
          // 否则，测试是否支持浏览器前缀
          for(var i =0;i<prefixes.length;i++){
              vendorProp = prefixes[i]+canProp;
              if(vendorProp in div.style){
                  supportedProp = vendorProp;
                  break;
              }
          }
      }
      div = null;//清除，防漏
      $.support[prop] = supportedProp;//放进去就可以直接监测浏览器是否支持了
      return supportedProp;
}
//使用
 var borderRadius = styleSupport('borderRadius');
if(borderRadius && borderRadius !="borderRadius"){
    $.cssHooks.borderRadius = {
        get:function(ele,computed,extra) {
          return $.css(ele,borderRadius);
        },
        set:function(ele,value) {
          ele.style[borderRadius] = value;
        }
    }
}

当然上述仍然再(function($){})(jQuery)中完成，这样就可以直接使用css方法了,比如，给id为div1的元素设置圆角:

1	$('#div1').css('borderRadius','10px');

再进一步

默认情况下，通过.css()方法设置的值，jq会为其加上’px’单位，可以通过cssNumber方法防止这种行为的发生。

1	$.cssNumber['prop']=true;

动画与cssHooks，则通过向jQuery.fx.step中添加属性，CSSHook同样可以向jQuery的动画机质中添加钩子

$.fx.step['prop'] = function(fx) {
    $.cssHooks['prop'].set(fx.ele,fx.now+fx.unit);
 
}

注意，上述这种用法应用于简单的数值属性的动画是最好的。根据不同的 CSS 属性，返回值的类型以及动画的复杂性，可能需要在 cssHooks 写更多的代码。